Как отображать элементы бок о бок без использования таблиц?

Например, вы хотите отобразить изображение рядом с текстом, обычно я бы это сделал:

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

Есть ли лучшая альтернатива?

Ответы

Ответ 1

Вы должны плавать в контейнере, который очищается.

Пример:

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

Чистая реализация - это "clearfix hack". Это версия Николаса Галлахера:

/**
 * 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;
}

Ответ 2

Да, divs и CSS - это, как правило, лучший и простой способ разместить ваш HTML. Существует много разных способов сделать это, и все зависит от контекста.

Например, если вы хотите поместить изображение справа от текста, вы можете сделать это так:

<p style="width: 500px;">
<img src="image.png" style="float: right;" />
This is some text
</p>

И если вы хотите отображать несколько элементов рядом друг с другом, обычно рекомендуется использовать float. Например:

<div>
  <img src="image1.png" style="float: left;" />
  <img src="image2.png" style="float: left;" />
  <img src="image3.png" style="float: left;" />
</div>

Плавающие эти изображения с той же стороны будут располагаться рядом друг с другом до тех пор, пока вы будете горизонтальным пространством.

Ответ 3

в эти дни div - это новая норма

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

Ответ 4

Как насчет display:inline?

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

Ответ 5

Обычно я делаю это:

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

Ответ 6

Это зависит от того, что вы хотите сделать и какого типа данных/информации вы показываете. В общем, таблицы зарезервированы для отображения табличных данных.

Альтернативой для вашей ситуации будет использование css. Простым вариантом было бы плавать ваше изображение и давать ему запас:

<p>
    <img style="float: left; margin: 5px;" ... />
    Text goes here...
</p>

Это заставит текст обтекать изображение. Если вы не хотите, чтобы текст обертывался вокруг изображения, поместите текст в отдельный контейнер:

<div>
    <img style="float: left; margin: ...;" ... />
    <p style="float: right;">Text goes here...</p>
</div>

Обратите внимание, что может потребоваться присвоить ширину тегу абзаца, чтобы отобразить способ, который вы хотите. Также обратите внимание, что для элементов, которые появляются под элементами с плавающей точкой, вам может потребоваться добавить стиль "clear: left;" (или ясно: справа или ясно: оба).

Ответ 7

negative margin поможет много!

html DOM выглядит следующим образом:

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

И CSS:

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

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

main_body будет реагировать на него, может ли это помочь вам!

Ответ 8

Попробуйте вызвать изображение в теге <DIV>, что позволит обеспечить более плавное и быстрое время загрузки. Обратите внимание, что, поскольку это фоновое изображение, вы можете также поместить текст поверх изображения между тегами <DIV></DIV>. Это отлично подходит для пользовательских магазинов и списков магазинов, а также... для публикации оверлей "Распродано!" Или того, что вам может понадобиться.

Ниже приведена версия pic/text-side by side, которая может быть использована для публикации в блоге и списка статей:

<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>