0

What I like to do is to use a DIV's vs. Table.

I like to show an image and to the right of that image show text. The text should be aligned to the top edge of the image. There should be some spacing between the text the image.

I have the following code but seems like the image comes and then the text comes below it:

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

5 回答 5

0

你只需要删除第一个

<div style="clear:left"></div>
于 2013-09-24T17:14:19.890 回答
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 */
于 2013-09-24T17:17:24.357 回答
0

我不明白你为什么有这 2 个 div： 

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

他们只是阻止你的文本 div 和你的图像 div 在同一行。Css 属性“清除”使您的容器永远不会有另一个容器浮动，就在他的左边。

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

就足够了

于 2013-09-24T17:18:02.833 回答
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，右边一个div！

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

这是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 将被放置在右侧！他们都将排成一行。如你所愿。

祝你好运，加油！:)

于 2013-09-24T17:18:40.950 回答
0

您可以使用浮动/溢出技巧：

<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

于 2013-09-24T17:20:02.427 回答