更新

Question

我正在尝试水平对齐更大div内的三个div，这是我的代码：

#creators {
  text-align: center;
}
.creator_name {
  width: 22%;
  margin: 1% 1%;
}

<div id="about" class="big-part">
  <h3>About us</h3>
  <p>Text</p>
</div>

<div id="work" class="big-part">
  <h3>Work</h3>
  <p>Text</p>
</div>

<div id="creators" class="big-part">
  <h3>Creators</h3>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
</div>

我尝试了float: left，但网页变得很糟糕。向左浮动：欢迎任何帮助，谢谢！

Answer 1

尝试在display: inline-block

上使用creator_name

.creator_name {
    width: 22%;
    margin: 1% 1%;
    display: inline-block;
}

Answer 2

您可以使用display: inline-block;与vertical-align: top;和margin-left: -4px;结合使用来对齐大div中的div。

#creators {
  text-align: center;
}
.creator_name {
  width: 30.33%;
  display: inline-block;
  vertical-align: top;
  /*
   * Used to fight white space between divs
   * https://css-tricks.com/fighting-the-space-between-inline-block-elements/
   */
  margin-left: -4px;
  margin: 1% 1%;
}

<div id="about" class="big-part">
  <h3>About us</h3>
  <p>Text</p>
</div>

<div id="work" class="big-part">
  <h3>Work</h3>
  <p>Text</p>
</div>

<div id="creators" class="big-part">
  <h3>Creators</h3>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
</div>

有关margin-left: -4px;的更多信息，请参阅：Fighting the space between inline block elements

Answer 3

如果您使用浮标，请记得清除浮动。这样做的简单方法是在父容器上使用overflow：auto：

#creators {
  text-align: center;
  overflow: auto;
}
.creator_name {
  width: 22%;
  margin: 1% 1%;
  float: left;
  background: #EEE;
}

<div id="creators" class="big-part">
  <h3>Creators</h3>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
</div>

Answer 4

我看到你想要将它们对齐。使用css flex。

将所有3个div放在包装div中。然后给出包装器div display:flex;justify-content:center; CSS属性。

.wrapper{display:flex;justify-content:center;}
.inner{background:#f2f5f6;margin: 0 1em 0;border:solid 1px #ffcc00;padding:.25em;}

<div class="wrapper">
  <div class="inner">One</div>
  <div class="inner">Two</div>
  <div class="inner">Three</div>
</div>

Answer 5

试一试。你的代码几乎只需要一些CSS。

h3 {
  text-align: center;
}
#about, #work {
  background: #7D26CD;
  margin-bottom: 15px;
  border-radius: 5px;
  color: #fff;
}
#creators {
    text-align: center;
    clear: both;
    width: 100%;
}
.creator_name {
   width: 31%;
   margin: 1% 1%;
   float: left;
   display: inline-block;
}

.big-part {
  float: left;
  width: 100%;
}

<div id = "about" class = "big-part">
    <h3>About us</h3>
    <p>Text</p>

</div>

<div id = "work" class = "big-part">
    <h3>Work</h3>
    <p>Text</p>
</div>

<div id = "creators" class = "big-part">
    <h3>Creators</h3>
    <div class = "creator_name">
        <h4>Name</h4>
        <p>Text</p>
    </div>

    <div class = "creator_name">
        <h4>Name</h4>
        <p>Text</p>
    </div>

    <div class = "creator_name">
        <h4>Name</h4>
        <p>Text</p>
    </div>
</div>

Answer 6

这是因为默认情况下div为display: block;。

#creators {
  text-align: center;
}
.creator_name {
  width: 22%;
  margin: 1% 1%;
  display: inline-block;
}

<div id="about" class="big-part">
  <h3>About us</h3>
  <p>Text</p>
</div>

<div id="work" class="big-part">
  <h3>Work</h3>
  <p>Text</p>
</div>

<div id="creators" class="big-part">
  <h3>Creators</h3>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
</div>

Answer 7

将display: inline-block添加到您的.creator_name规则中。这将阻止divs自动占据整个宽度，并且不允许同一行上的任何其他元素。以下是一个示例：https://jsfiddle.net/8hLodkup/。

Answer 8

我不明白为什么不使用float：left，我用float做了同样的例子：left and work。看：的 HTML

<div id="content"> <div id="tree"> <ul id="ulroot"> </ul> </div> <div id="file"> <ul id="ulfile"></ul> </div> <div id="detail"></div> </div>

<强> CSS

#content{ height: 600px; width: 100%; border: 2px solid #c0c0c0; background-color: #80FF80; display:block} #tree{ float:left; height: 100%; min-height:100%; width: 30%; } #file{ float:left; height: 100%; width: 30%;} #detail{ float:left; height: 100%; min-height:100%; width: 40%;}

Answer 9

更新

对于小提琴很抱歉，免费帐户必须有限制。无论如何，我把演示放在一个片段中。

看起来我制作的第一个演示太快了，并且制作了与你想要的不同的布局，我的不好。这是一个基于第一个布局的布局，基本上我做了#siteNav flex column。

列布局

＆＃13;

@charset "utf-8";

/* Core CSS */

html {
  box-sizing: border-box;
  font: 400 16px/1.45'Source Code Pro';
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
}
body {
  background: #121;
  color: #FEF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  width: 100vw;
  height: 100vh;
}
#siteNav {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
}
#creators {
  text-align: center;
}
.creator_name {
  width: 31%;
  display: inline-block;
}
.big-part {
  display: table-cell;
  text-align: center;
}
#about,
#work,
#creators {
  width: 100%;
}

＆＃13;

<nav id="siteNav">
  <section id="about" class="big-part">
    <h3>About us</h3>
    <p>Text</p>
  </section>

  <section id="work" class="big-part">
    <h3>Work</h3>
    <p>Text</p>
  </section>

  <section id="creators" class="big-part">
    <h3>Creators</h3>
    <div class="creator_name">
      <h4>Name</h4>
      <p>Text</p>
    </div>
    <div class="creator_name">
      <h4>Name</h4>
      <p>Text</p>
    </div>
    <div class="creator_name">
      <h4>Name</h4>
      <p>Text</p>
    </div>
  </section>
</nav>

＆＃13;

更改

我同意，floats是邪恶的。
在<nav>
添加了CSS默认设置，以平衡浏览器默认设置中的任何不一致。
设置<nav> display: table table-layout: fixed border-collapse。现在#siteNav是除了名字之外的所有表格。
然后#about，#work和#creators到display: table-cell
将每个.big-part设为<section>，以便在标记中更容易看到。
#creators中3个独立的内容块为display: inline-block
不用说，这种布局是有效的。

宽度比率

第一级#siteNav 100%

#about 20% / #work 20% / #creators 60%

第二级#creators 60%

.creator_name 31% x 3 = 93%

行布局

＆＃13;

@charset "utf-8";

/* Core CSS */

html {
  box-sizing: border-box;
  font: 400 16px/1.45'Source Code Pro';
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
}
body {
  background: #121;
  color: #FEF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  width: 100vw;
  height: 100vh;
}
#siteNav {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
#creators {
  text-align: center;
}
.creator_name {
  width: 31%;
  display: inline-block;
}
.big-part {
  display: table-cell;
  text-align: center;
}
#about,
#work {
  width: 20%;
}
#creators {
  width: 60%;
}

＆＃13;

<nav id="siteNav">
  <section id="about" class="big-part">
    <h3>About us</h3>
    <p>Text</p>
  </section>

  <section id="work" class="big-part">
    <h3>Work</h3>
    <p>Text</p>
  </section>

  <section id="creators" class="big-part">
    <h3>Creators</h3>
    <div class="creator_name">
      <h4>Name</h4>
      <p>Text</p>
    </div>
    <div class="creator_name">
      <h4>Name</h4>
      <p>Text</p>
    </div>
    <div class="creator_name">
      <h4>Name</h4>
      <p>Text</p>
    </div>
  </section>
</nav>

＆＃13;

为什么我的div不是水平对齐的？

9 个答案:

更新

更改