gpt4 book ai didi

css - 无法正确居中并适合文本和 div

转载 作者:太空宇宙 更新时间:2023-11-04 14:27:48 24 4
gpt4 key购买 nike

嘿,我试图将我的文本放在一个 div 中,同时在我的内容区域中放置三个 div,但不知何故,这是行不通的......

HTML

            <div id="content">
<div class="latest">
<p>Gentlemen, these are my latest works</p>
</div>
<div id="works">
<div class="one">
<a href="myworks.html" class="title">Lineage 3 Online</a>
<div class="prev1"></div>
</div>
</div>
<div class="two">
<a href="myworks.html" class="title">Lineage 3 Online</a>
<div class="prev2"></div>
</div>
</div>
<div class="three">
<a href="myworks.html" class="title">Lineage 3 Online</a>
<div class="prev2"></div>
</div>
</div>
</div>

</div>

CSS

    div#content {
width: 1000px;
margin-left: auto;
margin-right: auto;
}

div.latest {
text-align: center;
font-family: "Open Sans", Helvetica, sans-serif;
color: #777;
text-transform: uppercase;
letter-spacing: 5px;
font-weight: bold;
font-size: 18px;
padding-top: 25px;
padding-bottom: 5px;
border-bottom: 2px solid #DADADA;
}

div#works {
margin-top: 8px;
border-top: 2px solid #DADADA;
}

/*************************************/

div.one {
float: left;
width: 300px;
height: 300px;
margin-top: 10px;
border: 1px dotted #333;

}

div.two {
width: 300px;
height: 300px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border: 1px dotted #333;
}

div.three {
float: right;
width: 300px;
height: 300px;
margin-top: 300px;
border: 1px dotted #333;
}


a.title {
color: #333;
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
text-align: center;
letter-spacing: 3px;
line-height: 3;
border: 1px solid #000;

}


div.prev1 {
background-image: url(images/prev1.jpg);
width: 300px;
height: 200px;
border: 2px solid #FFF;
-moz-box-shadow: 0 0 1px #000;
-webkit-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}

我还想补充一点,我是 HTML5 和 CSS 的新手,如果这个问题听起来很愚蠢,我很抱歉。

最佳答案

首先,你有一个额外的关闭</div>在您的每个 div 上标记,这些 div 是 #works 的直接子级分区

一旦你删除了那些无关的结束标签,为了让文本居中,添加 text-align:centerdiv#works CSS:

div#works {
margin-top: 8px;
border-top: 2px solid #DADADA;

/* add this */
text-align: center;
}

#works 的 children div 将继承它的文本对齐属性。

你的 div 没有正确对齐,因为你没有让中间的 float ,第三个的 margin-top 为 300px,而另外两个的 margin-top 为 10px。

无需为这些元素中的每一个创建新规则,因为它们都是 #works 的子元素div 你可以创建一个更通用的规则,只选择 #works 的子元素分区:

#works > div {
float: left;
width: 300px;
height: 300px;
margin-top: 10px;
border: 1px dotted #333;
}

在这种情况下,>选择器仅选择 #works 的直接子代分区

http://jsfiddle.net/jfUxA/3/

也只是一个建议:您不需要在您的 id 选择器前加上元素名称前缀。特别是因为 id 只应该在页面上出现一次,进一步用元素对选择器进行分类是多余的。

关于css - 无法正确居中并适合文本和 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19411793/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com