Question

事先，谢谢大家。我在学。所以我弄乱了我的布局，无法想出来解决它。

我基本上有一个包含3个div（一些文本块）的容器。主容器应为<div id="main">。它的宽度为1024px，高度为500px。它应该包含3篇文章或3个div。它们应该水平扩散。

第一篇“文章”应该是“主要div”左边67px。第三篇“文章”也应该是“主要文本”权利的67px。

在文章之间应该有大约55px的空间，或大约该值。我读到我需要将这些文章嵌套到另一个div（<div class=artcontainer">）并执行margin: 0 auto 我做到了但不太好。

以下是jsfiddle

<div id="main">
    <div class="artcontainer">
        <article class="pulllft">
    <h2>Adipiscing elit</h2>
    <br>
    <p>Mauris malesuada dapibus ornare. Aenean molestie, lorem vitae eleifend tincidunt, ipsum nibh cursus libero, ac molestie magna sem in eros. Interdum et malesfaucibus. Integer at id nulla congue. Praesent quis dolor mattis, vitae feugiat erat commodo.<a href="file:///D:/WEBSTRANICE/NNX1/bio.html#top">Read More</a></p>
    </article>

    <article class="pulllft">
    <h2>Lorem Ipsun</h2>
    <br>
    <p>Suspendisse id varius enim. Nulla facilisi. Pellentesque dapibus, ut luctus faucibus, erat metus tempor sem, a fringilla lacus diam a massa. Praesent porta, augue vel suscipit convallis, augue velit ultricies mauris, ut tempor massa ipsum ut magna.</p> 
    </article>

    <article class="pulllft">
    <h2>Lorem Ipsun</h2>
    <br>
    <p>Aliquam in mauris nulla. Cras neque mauris, congue vitae dignissim eu, euismod sit amet dolor. Etiam luctus tempor interdumEtiam in mi feugiat, rutrum nulla eget, posuere nibh. Mauris rhoncus velit nec leo luctus, ut dictum dolor laoreet. In consequat risus lectus.</p></article>

    </div>

我也很感兴趣，如果我使用正确的属性，在绝望的尝试中，我点击了我需要和不需要的东西。是否可以使用文章标签，或者我应该使用其他标签。

Css：

#main {
width: 1024px;
float: left;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1em;
color: rgba(51,51,51,1);
z-index: 99;
height: 500px;
position: static;
/* [disabled]visibility: inherit; */
background-color: #f3f2f1;
clear: both;
overflow: hidden;
text-align: center;
}

.pulllft {
width: 274px;
text-align: justify;
line-height: 1.3em;
float: left;
color: rgba(79,30,31,.8);
font-family: "Exo 2", "sans-serif;";
font-weight: 400;
font-size: 1.3em;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
height: 300px;
margin-top: 100px;
}

.artcontainer  {
width: 895px;
position: relative;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: rgba(0,153,102,1);
}

Answer 1

this您要找的是什么？

我改变了什么：

首先，你的内部div宽度不对;你希望它在1024px宽度div中每侧有67px的边距。

1024 - 2（67）= 890

你有895。

其次，你想要三篇文章之间的55px，所以从容器的宽度中减去它：

890 - 2（55）= 780

将3篇文章除以3：

780/3 = 260

你的宽度。

然后将填充应用于文章的右侧：

.pulllft
{
    padding-right: 55px;
}

并不适用于最后一个孩子：

.pulllft:last-child
{
    padding-right: 0;
}

在具有特定尺寸的1 div中居中3个div

1 个答案:

我改变了什么：