Html 文本在 CSS 中与照片对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2439368/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text Aligned Next To Photo in CSS
提问by PF1
I am wondering if there is some way to align text on the right of a photo, and keep the text in that same "box" even after the image ends using HTML and CSS. A quick "diagram" of what I am attempting to accomplish is below:
我想知道是否有某种方法可以对齐照片右侧的文本，并将文本保留在同一个“框”中，即使在图像使用 HTML 和 CSS 结束后也是如此。我试图完成的快速“图表”如下：
------- --------
------- --------
-Image- - Text -
------- --------
------- --------
--------
--------
Thanks for any help!
谢谢你的帮助！
采纳答案by typeoneerror
If you set a width on the text div and float both the Image and the Text left (float:left), that should do the trick. Clear the floats after both.
如果您在文本 div 上设置宽度并将图像和文本都向左浮动 (float:left)，那应该可以解决问题。在两者之后清除浮动。
<div style="float:left; width:200px">
<img/>
</div>
<div style="float:left; width:200px">
Text text text
</div>
<div style="clear:both"></div>
回答by Luca Filosofi
演示：http : //jsbin.com/iyeja/5
<div id="diagram">
<div class="separator"></div>
<div class="separator"></div>
<div id="text_image_box">
<span class="image"><img src="http://l.yimg.com/g/images/home_photo_megansoh.jpg" alt="" /></span><span class="text"><p>some text</p></span>
<div class="clear"></div>
</div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
</div>
<style>
/* JUST SOME FANCY STYLE*/
#diagram {
width:300px;
border:1px solid #000;
padding:10px;
margin:20px;
}
.separator {
height:2px;
width:300px;
border-bottom:1px dashed #333;
display:block;
margin:10px 0;
}
/* MAIN PART */
#text_image_box {
width:300px;
margin:0 auto;
padding:0
}
.image {
float:left;
width:180px;
height:300px;
overflow:hidden;
margin:0 auto;
}
.text {
float:right;
width:100px;
padding:0;
margin:0 auto;
}
.text p {
margin:0;
padding: 0 5px;
}
.clear {
clear:both
}
</style>
回答by J?rn Schou-Rode
Put the text in some kind of container, and float that container next to the floated image. The following code sample should give you the idea:
将文本放入某种容器中，并将该容器浮动到浮动图像旁边。下面的代码示例应该给你这个想法：
<img src="..." style="float:left; width: 200px;" />
<div style="float:left; width: 400px;">
<p>Bla bla...</p>
<p>Bla bla...</p>
<p>Bla bla...</p>
</div>
If you need some container around those two elements to automatically fit its height to the highest of the two floated elements, you can set a overflow: hiddenon that container. To make it work in IE6 as well, you will need to revert that to overflow: autoand add something bizarre like height: 1px.
如果您需要在这两个元素周围使用一些容器以使其高度自动适应两个浮动元素中最高的一个，您可以overflow: hidden在该容器上设置 a 。为了让它也能在 IE6 中工作，你需要将它恢复到overflow: auto并添加一些奇怪的东西，比如height: 1px.
回答by Pekka
You would usually create a divor pelement for the text and give both image and text a float: left. The exact implementation depends on other parameters like are the widthds fixed, what does your Layout look like, and so on.
您通常会为文本创建一个divorp元素，并为图像和文本提供一个float: left. 确切的实现取决于其他参数，例如固定的宽度、您的布局是什么样的，等等。
