Question

我正在尝试划分一个内部包含两篇文章的部分，它们必须使用边框具有相等的宽度，并且它们之间略有分离。最终目标是将这两篇文章放在一个部分中，然后放在旁边。

我似乎无法使文章具有相同的宽度，同时使用边框和它们之间的分隔。

section.sec2 {
  border: solid;
  margin-top: 5px;
  float: left;
  overflow: hidden;
  width: 84%;
  background-color: white;
  padding: 5px;
}
section.sec3 {
  width: 50%;
  float: left;
  margin-right: 5px;
}
section.sec4 {
  display: inline-block;
  width: 50%;
  margin-right: -330px;
}
article.ar1 {
  background-color: orange;
  border: solid;
  width: 100%;
  padding: 10px;
}
article.ar2 {
  background-color: red;
  float: left;
  width: 100%;
  border: solid;
  padding: 10px;
}
aside.as1 {
  background-color: purple;
  float: left;
  width: 200px;
}

<section class="sec2">
  <section class="sec3">
    <article class="ar1">Ar1</article>
  </section>
  <section class="sec4">
    <article class="ar2">Ar2</article>
  </section>
</section>

<aside class="as1">Aside</aside>

Answer 1

您必须删除空格，使用box-sizing并使用此类calc()。

＆＃13;

* {
  box-sizing: border-box;
}
section.sec2 {
  border: solid;
  float: left;
  width: calc(100% - 200px);
  background-color: white;
  padding: 5px;
}
section.sec3 {
  width: calc(50% - 5px);
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
}
section.sec4 {
  width: 50%;
  display: inline-block;
  vertical-align: top;
}
article.ar1 {
  background-color: orange;
  border: solid;
  width: 100%;
  padding: 10px;
}
article.ar2 {
  background-color: red;
  float: left;
  width: 100%;
  border: solid;
  padding: 10px;
}
aside.as1 {
  background-color: purple;
  float: left;
  width: 200px;
}

＆＃13;

<section class="sec2">
  <section class="sec3">
    <article class="ar1">Ar1</article>
  </section><!--
  
  --><section class="sec4">
    <article class="ar2">Ar2</article>
  </section>
</section>
 <aside class="as1">Aside</aside>

＆＃13;

或者使用Flexbox

可以更轻松地完成此操作

＆＃13;

* {
  box-sizing: border-box;
}
.container {
  display: flex;
  align-items: flex-start;
}
section.sec2 {
  border: solid;
  display: flex;
  flex: 1;
  background-color: white;
  padding: 5px;
}
.sec3,
.sec4 {
  flex: 1;
}
article.ar1 {
  background-color: orange;
  border: solid;
  padding: 10px;
}
article.ar2 {
  background-color: red;
  border: solid;
  padding: 10px;
}
aside.as1 {
  background-color: purple;
  flex: 0 0 200px;
}

＆＃13;

<div class="container">
  <section class="sec2">
    <section class="sec3">
      <article class="ar1">Ar1</article>
    </section>
    <section class="sec4">
      <article class="ar2">Ar2</article>
    </section>
  </section>
  <aside class="as1">Aside</aside>
</div>

＆＃13;

Answer 2

另一个答案......

插入一个额外的div，为所有内容添加box-sizing: border-box，将分隔符DIV设置为您喜欢的宽度，并对这两个部分使用width: calc(50% - 10px)，其中10px是宽度的一半分隔符。它的高度必须固定，因为它没有内容，1px就足够了。我给它一个背景颜色只是为了让它可见 - 如果你使用那个代码，擦除背景颜色：

http://codepen.io/anon/pen/zKWxrV

<section class="sec2">
  <section class="sec3">
    <article class="ar1">Ar1</article>
  </section>
  <div class="vertical_separation">
  </div>
  <section class="sec4">
    <article class="ar2">Ar2</article>
  </section>
</section>

<aside class="as1">Aside</aside>

CSS：

* {
  box-sizing: border-box;
}
section.sec2 {
  border: solid 1px black;
  margin-top: 5px;
  float: left;
  width: 84%;
  background-color: white;
  padding: 5px;
  overflow: hidden;
}

section.sec3 {
  float: left;
  width: calc(50% - 10px);
  display: inline-block;
}

section.sec4 {
  float: left;
  width: calc(50% - 10px);
  display: inline-block;
}

article.ar1 {
  background-color: orange;
  border: solid;
  width: 100%;
  padding: 10px;
}

article.ar2 {
  background-color: red;
  width: 100%;
  border: solid;
  padding: 10px;
}

aside.as1 {
  background-color: purple;
  float: left;
  width: 200px;
}

.vertical_separation {
  float: left;
  width: 20px;
  height: 10px;
  background: green;
}

如何用两个宽度相等的物品划分？

2 个答案: