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

文章目录

首字下沉

向右浮动的内容是一样的效果,只是反过来了——浮动元素会吸附到右边,而其他内容将从左侧环绕它。尝试将上一个例子中的浮动值改为 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;
}

两列布局

让我们先从最简单的例子——两列布局。您可以通过创建一个新的 index.html文件在您的计算机上,用simple HTML template填充它, 并在适当的地方插入下面的代码。

首先,我们需要一些内容放入我们的列。使用以下内容替换body中的任何内容:

<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地址:44.200.27.215,欢迎您的访问!

温馨提示 : 非特殊注明,否则均为李联华的博客原创文章,本站文章未经授权禁止任何形式转载
文章链接:https://www.ooize.com/initial-sinking-example.html

订阅文章

在下面输入您的电子邮件地址以订阅我们的文章

留下评论

Loading...