浮柱的宽度相等

时间：2016-11-27 17:04:17

标签： html css

设置四个浮动div的相等宽度时遇到问题。 第一个和最后一个div必须在容器侧，每个div（和div宽度）之间的间隙必须相同。

像这样：| [] [] [] [] | （其中| =容器侧，[] = div）。

我制作另一个div来控制边距，但它没有用。

HTML＆amp; SCSS：

＆＃13;
＆＃13; 
.wrapper {
  padding: 50px 0px;
}
.wrapper .services-box {
  float: left;
  width: 25%;
  padding: 0 20px 20px 0;
}
.wrapper .services-box:nth-of-type(4n+4) {
  padding: 0 0 20px 0;
}
.wrapper .services-box .service {
  padding: 20px;
  background-color: #fff;
}
＆＃13; 
<div class="wrapper">
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet
        </p>
          <a href="#">More</a>
    </div>
  </div>
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet
        </p>
          <a href="#">More</a>
    </div>
  </div>
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet
        </p>
          <a href="#">More</a>
    </div>
  </div>
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet
        </p>
          <a href="#">More</a>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

有没有机会在不使用js / calc / flexbox的情况下解决这个问题？

IMAGE OF ISSUE

5 个答案:

答案 0 :(得分：1)

从.services-box：

中删除填充

＆＃13;
＆＃13; 
.wrapper {
  padding: 50px 0px;
}
.wrapper .services-box {
  float: left;
  width: 25%;
}
.wrapper .services-box .service {
  padding: 20px;
  background-color: #fff;
}
.wrapper .services-box:first-child .service {
  padding-left: 0;
}
.wrapper .services-box:last-child .service {
  padding-right: 0;
}
＆＃13; 
<div class="wrapper">
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet<p>
      <a href="#">More</a>
    </div>
  </div>
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet<p>
      <a href="#">More</a>
    </div>
  </div>
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet<p>
      <a href="#">More</a>
    </div>
  </div>
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet<p>
      <a href="#">More</a>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

另一种选择是将每个容器的宽度设置为20％并计算每个容器的边距右边的（其余的（100-80）/ 3 = = 6.66％）（不包括最后一个容器）。 / p>

＆＃13;
＆＃13; 
.wrapper {
  padding: 50px 0px;
}
.wrapper .services-box {
  float: left;
  width: 20%;
  margin-right: 6.6%;
}
.wrapper .services-box .service {
  padding: 0;
  background-color: #fff;
}
.wrapper .services-box:first-child .service {
  padding-left: 0;
}
.wrapper .services-box:last-child .service {
  padding-right: 0;
}
.wrapper .services-box:last-child {
  margin: 0;
}
＆＃13; 
<div class="wrapper">
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet<p>
      <a href="#">More</a>
    </div>
  </div>
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet<p>
      <a href="#">More</a>
    </div>
  </div>
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet<p>
      <a href="#">More</a>
    </div>
  </div>
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet<p>
      <a href="#">More</a>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

您可以使用20（* 4）+6.66（* 3）或22（* 4）+4（* 3）或任何其他适合您的组合。

答案 1 :(得分：1)

只需添加* { box-sizing: border-box; }即可按预期运行。如果您使用标准box-sizing: content-box;填充，已添加到容器宽度。

＆＃13;
＆＃13; 
html,
body {
  box-sizing: border-box;
  color: white;
}
*,
*:after,
*:before {
  box-sizing: inherit;
}
.wrapper {
  overflow: hidden;
  background-color: grey;
}
.services-box {
  background-color: orange;
  float: left;
  width: 24.25%;
  margin-right: 1%;
  padding-top: 20px;
}
.services-box:nth-of-type(4n+4) {
  margin-right: 0;
}
.service {
  background-color: black;
}
＆＃13; 
<div class="wrapper">
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet
        <p>
          <a href="#">More</a>
    </div>
  </div>
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet
        <p>
          <a href="#">More</a>
    </div>
  </div>
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet
        <p>
          <a href="#">More</a>
    </div>
  </div>
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet
        <p>
          <a href="#">More</a>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

您可以将列定义为import pandas as pd import numpy as np df = pd.DataFrame(np.random.randn(3, 2), columns=['num1', 'num2']) df['num3'] = 3 df.loc[df['num3'] == '3', 'num3'] = 4 # TypeError and the Warning df.loc[df['num3'] == 3, 'num3'] = 4 # No Error ，而不是浮点数。按照其他人的建议设置框大小，但不要删除第四个框大小。防止包装（包装不是意图）并隐藏水平溢出。这将隐藏第四列的额外填充。如果您需要额外的行，我相信您每四行需要display: inline-block个标记。

<br />
html, body { box-sizing: border-box; }
* { box-sizing: inherit; }

.wrapper {
  white-space: nowrap;
  overflow-x: hidden;
  padding: 50px 0px;
}
.wrapper .services-box {
  display: inline-block;
  white-space: normal;
  width: 25%;
  padding: 0 20px 20px 0;
}
.wrapper .services-box .service {
  padding: 20px;
  background-color: #fff;
}

答案 3 :(得分：0)

你只需要在你的css中添加它：

*, *:after, *:before {
   box-sizing: border-box;
}

实施例

＆＃13;
＆＃13; 
.wrapper {
  padding: 50px 0px;
}
.wrapper .services-box {
  float: left;
  width: 25%;
  padding: 0 20px 20px 0;
}
.wrapper .services-box:nth-of-type(4n+4) {
  padding: 0 0 20px 0;
}
.wrapper .services-box .service {
  padding: 20px;
  background-color: #fff;
}
*, *:after, *:before {
  box-sizing: border-box;
}
＆＃13; 
<div class="wrapper">
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet
        <p>
          <a href="#">More</a>
    </div>
  </div>
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet
        <p>
          <a href="#">More</a>
    </div>
  </div>
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet
        <p>
          <a href="#">More</a>
    </div>
  </div>
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet
        <p>
          <a href="#">More</a>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

默认情况下，您在框上设置的padding会增加元素宽度，导致它们在可用空间不足时换行换行。

要修复它，您可以将其添加到CSS中，这样可以产生更可预测的行为：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

这是完整的工作演示：

＆＃13;
＆＃13; 
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.wrapper {
  margin-left: -20px; /* Absorb the gutters */
  padding: 50px 0px;
}
.wrapper .services-box {
  float: left;
  width: 25%;
  padding: 0 0 20px 20px;
}
/*.wrapper .services-box:nth-of-type(4n+4) {
  padding: 0 0 20px 0;
}*/
.wrapper .services-box .service {
  padding: 20px;
  background-color: #fff;
}
＆＃13; 
<div class="wrapper">
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet
        <p>
          <a href="#">More</a>
    </div>
  </div>
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet
        <p>
          <a href="#">More</a>
    </div>
  </div>
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet
        <p>
          <a href="#">More</a>
    </div>
  </div>
  <div class="services-box">
    <div class="service">
      <h5>Lorem ipsum</h5>
      <p>Lorem ipsum dolor sit amet
        <p>
          <a href="#">More</a>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题