我喜欢做的是使用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>
答案 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。
您将在线显示它们!我的意思是左边的一个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将放置在右侧!他们俩都会排成一列。正如你想要的那样。
祝你好运,欢呼! :)答案 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;}