Question

我在整理工作时遇到了麻烦。我真的想学习如何简化我的工作。但我首先将所有内容放在屏幕上，然后将元素分开。在我看到所有元素后，我解决了CSS问题。

＆＃13;

.left {
  position: relative;
  margin-top: 50px;
  margin-bottom: 10px;
  float: left;
  height: 400px;
  width: 33%;
}
.middle {
  position: relative;
  margin: 50px 3px 10px 3.5px;
  float: left;
  height: 400px;
  width: 33%;
}
.right {
  position: relative;
  margin-top: 50px;
  margin-bottom: 10px;
  float: right;
  height: 400px;
  width: 33%;
}

＆＃13;

<div id="header">
  <p id="logo">GRAPEFRUIT</p>
  <li>Home</li>
  <li>Download</li>
  <p id="fund">KickStarter</p>
</div>
<div id="top">
  <h1>Split Screen Messeging - Texting With Motion Images!</h1>
</div>
<div class="left" id="preview"></div>
<div class="middle" id="preview"></div>
<div class="right" id="preview"></div>
<div id="footer"></div>

＆＃13;

Answer 1

链接以查看它适用于jsFiddle - http://jsfiddle.net/a1ynzr7p/1/

    <div id="header">
       <p id="logo"> GRAPEFRUIT</p>
       <li>Home</li>
       <li>Download</li>
       <p id="fund">KickStarter<p>
     </div>
     <div id="top">
     <h1>Split Screen Messeging - Texting With Motion Images!</h1>
     </div>
    <div class="evenThree" id="preview">LEFT
    </div>
    <div class="evenThree" id="preview">MIDDLE
    </div>
    <div class="evenThree" id="preview">RIGHT
    </div>
    <div id="footer">
    </div>

CSS

.evenThree{float:left; width:33%;}

Answer 2

另一种解决方案是在这三个项目的父容器上使用display:flex;。

http://jsfiddle.net/kqxyqL0f/3/

.contentWrapper {
    display:flex;
}
.column {
    width:33%;
}

<div id="header">
    <p id="logo">GRAPEFRUIT</p>
    <li>Home</li>
    <li>Download</li>
    <p id="fund">KickStarter
        <p>
</div>
<div id="top">
     <h1>Split Screen Messeging - Texting With Motion Images!</h1>

</div>
<div class="contentWrapper">
    <div class="column" id="preview">TESTING LEFT</div>
    <div class="column" id="preview">TESTING MID</div>
    <div class="column" id="preview">TESTING RIGHT</div>
</div>
<div id="footer"></div>

Answer 3

您是否尝试创建三列（水平对齐div）？您可以使用适用的类：float:left和width:33%简单地将每列（左，中，右）包裹起来。

如下所示：jsfiddle

.col-3 {
    float:left;
    width:33%;
}

<div class="row">
    <div class="col-3">Left</div>
    <div class="col-3">Middle</div>
    <div class="col-3">Right</div>
</div>

还有一些提示可以帮助您的代码：

ID不可重复使用，请勿在整个代码中重复使用。将它们更改为类或将ID更改为唯一。
确保所有<li>元素都包含在<ul>或<ol>代码中

Answer 4

你也可以做这两件事。请参阅方框1 - 3，他们正在使用带有CSS display: table-cell的DIV。更容易将内容放在框中居中。包含Box 4,5和6的DIV正在使用display: inline-block - 它们在它们之间使用边距更灵活，但是，您必须做一些特殊的事情才能使文本成为中心（将其包装在{ {1}}）。

或者您可以学习Twitter-Bootstrap（查找）。在为网站应用布局时，尤其是当您的要求是为了使其适合移动设备时，您会好得多。

<span>

.container {display: table;margin-bottom:30px}
.set {
  display:table-cell;
  width: 200px; 
  height: 200px;
  text-align:center;
  vertical-align:middle;
  padding:10px;
  background-color:#9a9a9a;
  border:1px solid #444;
}

.set2 {
  display:inline-block;
  width:140px;
  height:90px;
  text-align:center;
  background-color:#A75b5b;
  margin: auto 10px;
  border:1px solid #444;
}

水平对齐三个div。需要建议

4 个答案: