margin属性值可以为百分比css单列_CSS布局：单列⽂本
css 单列
In a grid-based design,
, 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.
，我们可能希望通过将段落⽂本放置在其⾃⼰的列中(与图像分开)来保留直线布局。 虽然允许段落在图像下换⾏可以充分利⽤可⽤空间，但将所有内容保持在⽹格中同时⼜忠实于流体设计原理可能更合适(尤其是在⽂本内容很少的情况下)。
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%的内容。
css 单列

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。