css 单列_CSS布局：单列文本

css 单列

In a grid-based design,

such as the one we used for Evil Incorporated, we may wish to preserve the rectilinear layout by placing the paragraph text into its own column, separate from our image. While allowing paragraphs to wrap under the image makes the best use of available space, it may be more appropriate (particularly if there is little text content) to keep everything in a grid while remaining true to the principles of fluid design.

例如我们用于Evil Incorporated的设计)中 ，我们可能希望通过将段落文本放置在其自己的列中(与图像分开)来保留直线布局。 虽然允许段落在图像下换行可以充分利用可用空间，但将所有内容保持在网格中同时又忠实于流体设计原理可能更合适(尤其是在文本内容很少的情况下)。

There are a few possible ways to approach this. For the Evil Incorporated design, the simplest method would be to increase the margin-right on the paragraphs:

有几种可能的方法可以解决此问题。 对于Evil Incorporated设计，最简单的方法是增加以下段落的margin-right ：

p {
	font-family: Baskerville, Times, serif;
	text-align: justify;
	margin-left: 5em;
	margin-right: 20em;
}

Note that adding this significant amount of margin-right to the declaration for the paragraphs does not have the effect you might expect. Rather than being pushed 20em away from the definition list, the right side of the paragraph text is instead pushed away from the right of the body. The captioned image’s margin-left is still in place.

请注意，将大量的margin-right到段落的声明中并不会产生预期的效果。 段落文本的右侧不是从定义列表中20em ，而是从正文的右侧移开了 。 字幕图像的margin-left仍在原位。

Why does this work in the way it does? Very simply, because the paragraphs come after the captioned image. By creating a significant margin-right, you are essentially creating a space for the definition list / captioned image to fall into when it floats to the right.

为什么这样做会起作用？ 很简单，因为段落来的字幕影像后 。 通过创建一个有效的margin-right ，您实际上是在为定义列表/带标题的图像浮动到右侧时要落入的空间。

At this point, setting a min-width for the body or containing div is pretty much required.

此时，非常需要为body设置min-width或包含div 。

There is another method, somewhat more complex, that defines width as a percentage for each element. There are a few issues with this:

还有另一种方法，稍微复杂些，该方法将width定义为每个元素的百分比 。 这有一些问题：

• You must always keep in mind that width is a portion of the width of the container

  您必须始终牢记宽度是容器 width 的一部分

• float may no longer work quite as expected: you may need to use margin: auto or text-align: centre to make floated elements appear the way you wish.

  float可能不再按预期工作：您可能需要使用margin: auto或text-align: centre来使浮动元素以您希望的方式显示。

• width refers to the width of the content, not that of the overall box, (at least by default) so you must allow for padding, border, outline, margin, etc.

  width是指内容的宽度 ，而不是整个框的宽度 (至少默认情况下)，因此您必须允许padding ， border ， outline ， margin等等。

• mixing elements that have width expressed in % alongside those measured using other units, such as px, can get tricky.

  混合width以%表示的元素以及使用其他单位(例如px测量的元素会变得棘手。

In essence, the sum of widths expressed in percentages of elements that are side-by-side must be less than 100%. Try 45% for the paragraphs and 35% for the definition list holding our captioned image.

本质上，以并排元素的百分比表示的宽度总和必须小于100% 。 尝试为段落添加45%为包含标题图像的定义列表的35%的内容。

翻译自: https://thenewcode.com/76/CSS-Layouts-Single-Column-Text

css 单列