Question

我正在尝试将图片放在页面的左侧，文本向右浮动。我正在使用：

<div class="body">
        <div style="float: left;">
            <img src="me.png" height="310" width="350">
        </div>
        <p id="text"> BAJFS:LKJFKLJ#@LKJLK#FJ#@:LFKJ#@:LFKJ#@:LK#FJ:L#KFJ#:@LFKJ#:LFKJ#@F:L#K@JF:#LFK J </p>            
    </div>

我认为这会让我的图像在左边，文字浮动到右边。我正在使用的CSS是：

.body
{
width: 880px;
margin: 20px auto;
background-color: #CFECEC;
padding: 10px 16px;
-moz-border-radius: 2px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 5px;
-webkit-box-shadow: 3px 5px 4px #000;
-moz-box-shadow: 3px 5px 4px #000;
box-shadow: 3px 5px 4px #000;
}

任何人都可以帮我在这个框架的左边有一张图片，文字在右边吗？

Answer 1

我认为你的文字没有向右浮动的唯一原因是它内部没有空间。段落的宽度完全不同，因为它们都是连续的字母。

Answer 2

您可以将宽度设置为#text并将其向右浮动。您还需要为图像父div设置宽度。添加溢出：隐藏; to .body包含浮动元素。

#text {
  float: left;
  width: 550px;
}

.figure { /* add this to your images parent */
  float: left;
  width: 350px;
}

.body {
  ...
  overflow: hidden;
}

Answer 3

你的CSS工作正常。问题出在你试图包装的文本中。你有一条没有空格的单行，因此它根本不适合图像，所以它会下降到它下面。

尝试使用不同虚拟文本的相同代码，你会发现它有效：

    <div class="body">
            <div style="float: left;">
                <img src="me.png" height="310" width="350">
            </div>
            <p id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mi, porttitor et rhoncus ac, aliquet vitae nunc. Phasellus nec eros vel lectus tempus placerat. Aenean lacinia euismod ultricies. In non ullamcorper urna. Donec nisi dolor, dictum eu facilisis sed, semper a lacus. Nulla dictum molestie tellus vitae ultricies. Etiam urna est, sodales et ultricies quis, vestibulum et lectus. Fusce iaculis cursus eleifend. Fusce venenatis est non nulla adipiscing condimentum. Aenean volutpat lectus est, at dictum nibh. Quisque facilisis purus et arcu dapibus at fringilla metus elementum. Integer consequat pellentesque auctor. Duis hendrerit feugiat diam vel lobortis. Nunc mauris leo, lacinia sit amet laoreet ut, auctor a arcu.

    Aliquam dignissim rhoncus turpis, eget facilisis est blandit sed. Nunc quis nulla diam. Ut et quam nisl, a tristique mauris. Etiam ut quam in sem luctus pellentesque. Morbi viverra, odio ut tincidunt posuere, odio mauris egestas mi, non ornare arcu justo gravida risus. Sed odio leo, viverra ut tristique ac, imperdiet eu tortor. Nulla nunc nisl, pharetra eu ornare sed, aliquam quis lorem. Nunc pellentesque, libero eu venenatis laoreet, sapien augue ultricies sem, in facilisis nisi erat in odio. Suspendisse ullamcorper, risus at aliquam gravida, mi dolor adipiscing erat, ut tincidunt lacus urna sed leo. Cras posuere imperdiet velit, eu convallis velit ornare et. Praesent semper varius tortor, et malesuada sem malesuada quis. Mauris elementum sem ac ante aliquet faucibus et et nisi. Quisque id quam in dui varius egestas et eu diam. Fusce ultrices feugiat sapien.

    In aliquam congue urna in scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin tortor eros, pellentesque id pharetra nec, interdum et tellus. In dapibus condimentum iaculis. Vivamus nec risus et ante blandit pretium non at tortor. Vivamus non sapien lorem. Phasellus ac nisi eget quam varius accumsan vel a ipsum. Phasellus mattis pellentesque auctor. Aenean risus mi, iaculis ut feugiat vel, pretium sit amet eros. Curabitur varius faucibus tempor.</p>            
        </div>

HTML <div>和CSS样式</div>

3 个答案: