首字下沉例子、多列浮动布局

首字下沉

向右浮动的内容是一样的效果，只是反过来了——浮动元素会吸附到右边，而其他内容将从左侧环绕它。尝试将上一个例子中的浮动值改为 right ，再把 margin-right 换成 margin-left ，看看结果是什么。

<p>这是我非常重要的一段。我是一名普通的开发者，因此需要以适合您的方式设计。学生们，继续学习CSS吧！</p>

我们的CSS看起来像这样：

p {
width: 400px;
margin: 0 auto;
}

p::first-line {
text-transform: uppercase;
}

p::first-letter {
font-size: 3em;
border: 1px solid black;
background: red;
float: left;
padding: 2px;
margin-right: 4px;
}

两列布局

<h1>两列布局</h1>
<div>
<h2>第一列</h2>
<p> 这是我非常重要的一段。我是一名普通的开发者，因此需要以适合您的方式设计。学生们，继续学习CSS吧！</p>
</div>

<div>
<h2>第二列</h2>
<p>这是我非常重要的一段。我是一名普通的开发者，因此需要以适合您的方式设计。学生们，继续学习CSS吧！</p>
</div>

每个列都需要一个外部元素来包含其内容，并让我们一次操作它的所有内容。在这个例子中，我们选择了<div>，但你可以选择更多语义合适的东西<article>、<section>、和<aside>，诸如此类。

现在为CSS将以下内容应用到HTML以提供一些基本设置：

body {
width: 90%;
max-width: 900px;
margin: 0 auto;
}

在宽度达到900px之前，整个视图的宽度将达到90%，在超过900px后，它将保持在这个宽度，并在视口中居中。默认情况下，子元素(这个<h1>和两个 <div>)将跨越整个body宽度的100%。如果我们希望将两个<div>放在一起，那么我们需要将它们的宽度设置为父元素的宽度的100%，或者更小，这样它们就可以彼此匹配。将下面的内容添加到CSS的底部：

div:nth-of-type(1) {
width: 48%;
}

div:nth-of-type(2) {
width: 48%;
}

在这里我们设置了他们的父级的宽度的48％ —— 这总计96％，留下我们4％自由作为两列之间的沟槽，给内容一些空间呼吸。现在我们只需要浮动列，像这样：

div:nth-of-type(1) {
width: 48%;
float: left;
}

div:nth-of-type(2) {
width: 48%;
float: right;
}

©️李联华的博客网 当前IP地址：18.117.11.176，归属地:俄亥俄州Dublin ，欢迎您的访问！