0

CSS 和一个 div 我正在尝试使用 float left 来表示图像，并使用 float right 来描述它。我似乎无法在不打乱他们的位置的情况下将它们对齐。我尝试调整文本，但每次文本太多时，整行段落都会换行，这就是发生的情况。

http://postimg.org/image/b2n0g31sh/

我怎样才能避免这种情况并使图像保持在它的位置并且文本保持在右侧，当达到它的极限时它应该打破到一个新的行而不会从位置浮动权利中解体？到目前为止，这是我的代码。

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">&nbsp;&nbsp;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 -->
4

1 回答 1

1

假设您希望图像和描述作为开始新行的部分，请尝试以下操作：

#imageholder {
    border: 1px dotted red;
    overflow: auto;
}
#imageholder img {
    padding: 50px;
    float: left;
}
#divfloatright {
    text-align:left;
    padding-right:50px;
    word-break:break-all;
}

参见演示：http: //jsfiddle.net/audetwebdesign/93WGq/5/

于 2013-09-10T18:47:22.527 回答