HTML с использованием DIV и таблицы

Question

HTML с использованием DIV и таблицы

0

Мне нравится делать DIV vs. Table.

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

У меня есть следующий код, но кажется, что изображение приходит, а затем текст под ним:

     <div style="float:left">
        <img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
     </div>  

     <div style="clear:left"></div>

     <div style="float:left">    
         %#Eval("title")  
     </div>

     <div style="clear:left"></div>

Nate Pet 24 сен. 2013, в 19:51

Источник

Теги:

html

5 ответов

0

HTML:

<div id="wrapper">
     <img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
     <div>image</div>
</div>

CSS:

#wrapper img, #wrapper div { float: left; }
#wrapper div { margin-left: 100px; } /* the size of your img + the space wanted */

GG. 24 сен. 2013, в 15:10

0

Я не понимаю, почему у вас есть это 2 divs:

<div style="clear:left"></div>

Они просто препятствуют тому, чтобы ваш текстовый div и ваш образ div были в одном ряду. Свойство Css "clear" заставляет ваш контейнер НИКОГДА не иметь другого контейнера, плавающего, здесь, слева от него.

 <div style="float:left">
    <img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
 </div>  

 <div style="float:left">    
     %#Eval("title")  
 </div>

Этого будет достаточно

OlivierH 24 сен. 2013, в 15:06

0

Вам просто нужно удалить первый

<div style="clear:left"></div>

Andrew Johnson 24 сен. 2013, в 14:57

0

Вот ответ!

Очевидно, используйте div. Вот простой пример!

Вы можете сначала создать родительский div затем внутри этого родительского div, вы можете создать 2 divs, например

<div>
  <div class="float-left"><img src="~/link_to_file.png" alt="photo" /></div>
  <div class="float-right">The text that would flow at the right side..</div>
</div>

Вот CSS для этого.

Вы будете показывать их inline! Я имею в виду один div слева на другом справа!
Вы будете отображать текст в верхнем углу! Это означает, что для текста div нет margin-top.

Вот код CSS:

.float-left {
  float: left;
}
.float-right {
  float: right;
}
.float-left, .float-right {
  display: inline; // use inline-block if you want to add padding or margins..
}

Таким образом, div с изображением выравнивается слева, а другой div будет помещен в правую сторону! И они оба будут в очереди. Как вы хотите, чтобы они были.

Удачи, ура! :)

Afzaal Ahmad Zeeshan 24 сен. 2013, в 14:43

Ещё вопросы

George · Accepted Answer · 2013-09-24T16-06-00.000Z

Вы можете использовать трюк float/overflow:

<div class="imgCont">
    <img src="../../images/img1.png" alt="Description" width="32" height="32">
</div>
<div class="text">    
    %#Eval("title")  
</div>

Я использовал классы вместо встроенного стиля:

.imgCont{float:left; margin-right:10px;}
.text{overflow:hidden;}

JSFiddle