[英]div using css confused using float left and right
CSS and a div I'm trying to use float left for image and float right for the description of it. CSS和div我正在尝试使用向左浮动图像和向右浮动描述它。 I can't seem to align them together without disorganizing their position.
我似乎无法在不破坏其立场的情况下将它们对齐。 I tried adjusting the text but every time the text is too much, the whole line of paragraph breaks to a new line, this is what happens.
我尝试调整文本,但是每当文本过多时,该段的整个行都会换到新行,就会发生这种情况。
http://postimg.org/image/b2n0g31sh/ http://postimg.org/image/b2n0g31sh/
How can I avoid this and make the image stay on it's position and the text stay to the right, and when reaches its limit it should break to a new line without disarranging itself from the position float right? 我该如何避免这种情况并使图像停留在其位置上以及文本保持在右侧,并且当达到其极限时,它应该换行,而不会使其自身从浮动的右边移开? This is my code so far.
到目前为止,这是我的代码。
http://jsfiddle.net/blackknights/93WGq/ http://jsfiddle.net/blackknights/93WGq/
<div id="container" align="center">
<div id="container2">
<div id="wrapper">
<div id="header">
<img src="tsclogo2.jpg" />
</div>
<div id="content">
<div id="menubar">
<ul id="mcolor">
<li><a href="tdesign.html"><font color="#000000"> Home </</a>
</li>
<li class="active"><a href=""><font color="#000000">About Us</font></a>
</li>
<li><a href="gallery.html"><font color="#000000">Gallery</font></a>
</li>
<li><a href="contactus.html"><font color="#000000">Contact Us</font></a>
</li>
</ul>
</div>
</div>
<div id="contentbody">
<div id="contentbodytext">
<div id="divaboutusintroductionparagraph"> INTRODUCTION PARAGRAPH INTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPH</div>
<div id="imageholder">
<img src="bridge.jpg" width="230" height="120" />
<div id="divfloatright">
<p>You rarely hear any entrepreneurs who succeeded in a snap. dddddddddddddddddddddddddddddddddd</div>
</div>
</div>
</div>
<!--closing tag for wrapper -->
</div>
<!--closing tag for container2 -->
</div>
<!--closing tag for container -->
Assuming you want the image and description as a section starting a new line, try something like: 假设您希望将图像和说明作为开始新行的部分,请尝试如下操作:
#imageholder {
border: 1px dotted red;
overflow: auto;
}
#imageholder img {
padding: 50px;
float: left;
}
#divfloatright {
text-align:left;
padding-right:50px;
word-break:break-all;
}
See demo at: http://jsfiddle.net/audetwebdesign/93WGq/5/ 参见演示: http : //jsfiddle.net/audetwebdesign/93WGq/5/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.