Comment afficher les éléments côte à côte sans utiliser de tables?

Par exemple, vous voulez afficher une image à côté d'un texte, en général, je ferais ceci:

<table>
    <tr>
        <td><img ...></td>
        <td>text</td>
    </tr>
</table>

Est-il une meilleure alternative?

source d'informationauteur IMB

18

Vous devriez float à l'intérieur d'un conteneur qui est effacé.

Exemple:

https://jsfiddle.net/W74Z8/504/

Comment afficher les éléments côte à côte sans utiliser de tables?

Propre mise en œuvre est la "clearfix hack". C'est Nicolas Gallagher's version:

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}

7

Oui, balises div et CSS sont généralement mieux et plus facile de placer votre code HTML. Il y a beaucoup de façons de le faire et tout dépend du contexte.

Par exemple, si vous souhaitez insérer une image à la droite de votre texte, vous pouvez le faire comme ceci:
```
<p style="width: 500px;">
<img src="image.png" style="float: right;" />
This is some text
</p> 
```
Et si vous souhaitez afficher plusieurs éléments côte à côte, le float est aussi généralement préférée.Par exemple:
```
<div>
  <img src="image1.png" style="float: left;" />
  <img src="image2.png" style="float: left;" />
  <img src="image3.png" style="float: left;" />
</div>
```
Flottant de ces images à la même côté aura ensuite la pose à côté les uns des autres, tant que vous hava espace horizontal.

3

ces jours-div est la nouvelle norme

<div style="float:left"><img.. ></div>
<div style="float:right">text</div>
<div style="clear:both"/>

1

Ce sujet display:inline?

<html>
      <img src='#' style='display:inline;'/>
      <p style='display:inline;'> Some text </p>
</html>

1

Habituellement je fais ceci:

<div>
   <p> 
       <img src='1.jpg' align='left' />
       Text Here
   <p>
</div>

0

Cela dépend de ce que vous voulez faire et quel type de données/de l'information que vous affichez. En général, les tables sont réservées pour afficher des données tabulaires.

Un autre pour votre situation serait d'utiliser les css. Une solution simple serait de laisser flotter votre image et lui donner une marge:
```
<p>
    <img style="float: left; margin: 5px;" ... />
    Text goes here...
</p>
```
Ce serait provoquer le texte à enrouler autour de l'image. Si vous ne voulez pas que le texte à enrouler autour de l'image, de mettre le texte dans un récipient séparé:
```
<div>
    <img style="float: left; margin: ...;" ... />
    <p style="float: right;">Text goes here...</p>
</div>
```
Noter qu'il peut être nécessaire d'attribuer une largeur de l'étiquette de paragraphe pour afficher la façon dont vous le souhaitez. À noter également, pour les éléments qui s'affichent ci-dessous flottait éléments, vous pouvez avoir besoin d'ajouter du style "clear: left;" (ou clair: droit, ou clear: both).

0

La negative margin aiderait beaucoup!

Le DOM html ressemble à ci-dessous:

<div class="main">
  <div class="main_body">Main content</div>
</div>
<div class="left">Left Images or something else</div>

Et le CSS:

.main {
  float:left;
  width:100%;
}

.main_body{
  margin-left:210px;
  height:200px;
}
.left{
  float:left;
  width:200px;
  height:200px;
  margin-left:-100%;
}

La main_body sera sensible c'est avec, peut-il vous aide à!

-1

Essayer d'appeler l'image dans un <DIV> balise, ce qui permettra une plus fluide et plus rapide temps de chargement. Prendre note parce que c'est une image de fond, vous pouvez mettre du texte sur l'image entre les <DIV></DIV> balises. Cela fonctionne très bien pour personnalisé boutique listes de...de publier un endroit frais "Vendu!" superposition, ou ce que vous voudrez peut-être.

Voici la photo/texte - verso par version côté, qui peut être utilisé pour le blog et l'article d'inscription:
```
<div class="whatever_container">
<h2>Title/Header Here</h2>
 <div id="image-container-name"style="background-image:url('images/whatever-this-is-named.jpg');background color:#FFFFFF;height:75px;width:20%;float:left;margin:0px 25px 0px 5px;"></div>
<p>All of your text goes here next to the image.</p></div>
```

Vous devez vous connecter pour publier un commentaire.