HTML使用DIV与表格

时间:2013-09-24 17:11:24

标签: html

我喜欢做的是使用DIV与表格。

我喜欢在图片的右边显示文字。文本应与图像的上边缘对齐。图像文本之间应该有一些间距。

我有以下代码,但似乎图像出现,然后文本低于它:

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

5 个答案:

答案 0 :(得分:0)

您只需删除第一个

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

答案 1 :(得分: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 */

答案 2 :(得分:0)

我不明白为什么你有这两个div:

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

这就够了

答案 3 :(得分:0)

这是答案!

显然使用div。这是一个简单的例子!

您可以先在父div中创建父div,您可以创建2个div,如

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

  1. 您将在线显示它们!我的意思是左边的一个div在右边!

  2. 您将在顶角显示文字!这意味着文本div没有margin-top

  3. 这是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将放置在右侧!他们俩都会排成一列。正如你想要的那样。

    祝你好运,欢呼! :)

答案 4 :(得分:0)

您可以使用float/overflow trick

<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