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

Question

提前谢谢大家。 我在学。所以我搞砸了我的布局，无法解决它。

我基本上有一个包含 3 个 div(一些文本 block )的容器。 主容器应该是<div id="main"> .它有 1024 像素的宽度和 500 像素的高度。 它应该包含 3 篇文章或 3 个 div。它们应该水平展开。

第一个“article”应该在“main div”左边67px处。 第三个“article”也应该在“main div”右边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 宽度错误；您希望它在 1024 像素宽度的 div 中每边有 67 像素的边距。

1024 - 2(67) = 890

你有 895。

---

其次，您希望三篇文章之间有 55px，所以从容器的宽度中减去它:

890 - 2(55) = 780

将它除以 3 得到 3 篇文章:

780 / 3 = 260

这是你的宽度。

---

然后将内边距应用到文章的右侧:

.pulllft
{
    padding-right: 55px;
}

并且不要应用于最后一个 child :

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