Question

我有左浮动图像。如何将内容（多个段落）对齐到右侧，这样就不会像下面这样包裹在图像的底部：

+-----+
|     | Lorem Ipsum
|     | Lorem Ipsum
+-----+ Lorem Ipsum
        Lorem Ipsum

这是显示错误行为的JSFiddle。一旦图像结束，段落就会换行。我需要更改什么才能获得上述结果？

Answer 1

设置overflow:hidden是实现这一目标的一种方法。

.content { overflow:hidden; }

http://jsfiddle.net/BnQRW/510/

Answer 2

首先创建一个具有指定宽度的容器：

<div class="container">
</div>

CSS

.container{
  width:100%;
}

让我们添加到列中，一列将占据屏幕的20％（此列将具有左侧内容），而其他列将占用80％，这将具有正确的内容。

<div class="container">

  <div class="col-1-5">
      <p>Random Left Content</p>
  </div>

  <div class="col-4-5">
     <p>Random Right Content</p>
  </div>

 </div>

让我们将所有col设置为向左浮动，col-1-5设置为20％，col-4-5设置为80％

[class*='col-']{
    float:left;
 }
.col-4-5{
  width:80%;
  background:blue;
}
.col-1-5{
  width:20%;
  background:green;
}

将段落右对齐图像（不包装）

2 个答案: