0

嘿，我试图将我的文本集中在一个 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 还很陌生，如果这个问题听起来很愚蠢，我很抱歉。

4

1 回答 1

1

首先，您的</div>每个 div 上都有一个额外的结束标签，它们是 div 的直接子级#works。

删除那些无关的结束标签后，为了使文本居中，添加text-align:center到div#workscss：

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

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

div的子#works元素将继承它的 text-align 属性。

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

不用为每个元素创建新规则，因为它们都是#worksdiv 的子元素，您可以创建更通用的规则，只选择 div 的子元素#works：

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

在这种情况下，>选择器仅选择#worksdiv 的直接子级。

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

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

于 2013-10-16T19:17:13.073 回答