并排放置 2 个盒子 [div's]

Question

我想将两个框放在 link 的底部，两个文章框 (div.content)，如您所见并排放置，但它们之间的距离不要太大。如何解决这个问题？

相关代码如下：

div.content {
    text-align: justify;
    color: #939393;
    padding: 25px 90px;
    margin: 0px auto 45px;
    width: 960px;
    border: 2px solid #F27F0E;
}

<div class="content-small" style="float: left;">

    <h2></h2>
    <ol class="posts"></ol>

</div>
<div class="content-small" style="float: right;">

    <h2></h2>
    <ol class="posts"></ol>

</div>

Answer 1

为这 2 个创建一个包装器 div

<div class="wrapper-new" style="margin:0 auto; width:...px;">
         <div class="content-small" style="float: left;">...</div>
         <div class="content-small" style="float: right;">...</div>    
 </div>

Answer 2

您需要将 float left 应用于两个框，并将 margin-right 设置为适当的值。

从此删除样式：

<div class="content-small" style="float: left;"></div>
<div class="content-small" style="float: right;"></div>

这样他们就变成了：

<div class="content-small"></div>
<div class="content-small"></div>

然后像这样更改您的 css：

div.content-small {
    text-align: justify;
    color: #939393;
    padding: 25px 50px;
    margin: 0px auto 45px;
    width: 450px;
    border: 2px solid #F27F0E;
    float:left;        /* add this */
    margin-right:40px; /* add this and change value acc */
}

您也可以尝试在每个方框上分别放置边距以获得您想要的结果

Answer 3

使用内联样式（将样式标签放在元素内部）从来都不是一件好事，最好的做法是将所有内容都保存在单独的样式表中，这样也更实用。

关于你的问题，你的样式表中几乎已经有了代码，只需删除内联样式并将两个 div 放在父 div.[=12= 中]

HTML:

<div class="content-bottom">
    <div class="content-small"></div>
    <div class="content-small"></div>
</div>

现在我们只需要添加一点 css 即可将所有内容置于当前布局的中心。

CSS:

.content-bottom {
    margin: 0 auto;
    width: 1144px;
}

您现在可能想要根据自己的喜好调整 content-small 类的宽度和边距。

希望对您有所帮助！

Answer 4

如何在两个文章框周围添加一个封闭的 div，如下所示。将其宽度设置为 1144px 与上面内容框的总宽度匹配。

<div style="width: 1144px; margin: 0 auto 0 auto">
  <div class="content-small" style="float: left;">
     ...
  </div>
  <div class="content-small" style="float: right;">
    ...
  </div>
</div>

Answer 5

![在此处输入图片描述][1]

这就是您需要做的。底部的两个文章框应该在固定宽度 1144px 的 div 内，两个 content-small 应该是 float:left，第二个带有 margin-left:36px;

就是这样！运行 Full page 中的代码片段，您可以看到您想要的结果。

注意：我已从代码段中删除了 jQuery。如果您觉得我的回答有用，请将其标记为已接受。谢谢！ :)

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #fff;
  background: #1A1A1A;
}
div.content {
  text-align: justify;
  color: #939393;
  padding: 25px 90px;
  margin: 0 auto 45px auto;
  width: 960px;
  border: 2px solid #F27F0E;
}
div.bottom-content {
  padding: 25px 0;
  margin: 0 auto 45px auto;
  width: 1144px;
}
div.content-small {
  text-align: justify;
  color: #939393;
  padding: 25px 50px;
  margin: 0;
  width: 450px;
  border: 2px solid #F27F0E;
}
a {
  text-decoration: none;
  color: #6B6B6B;
}
a:hover {
  border-bottom: 1px dotted #F27F0E;
}
dt {
  font-weight: bold;
  display: block;
  float: left;
  width: 150px;
  color: #bbb;
}
img {
  border: 1px solid rgba(51, 51, 51, 0.1);
}
div.date {
  width: 100px;
  padding-bottom: 14px;
  margin-left: -120px;
  float: left;
}
div.date p {
  padding: 5px 10px;
  margin-bottom: 0;
  text-align: right;
  font-family: Arial, sans-serif;
}
div.center {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 45px auto;
}
.icon {
  display: inline-block;
  height: 64px;
  width: 64px;
  text-indent: -9999em;
  margin: 0 1em;
}
#github {
  background-color: #4183c4;
  background-image: url(http://tekkkz.com/css/github.png);
}
#twitter {
  background-color: #00aced;
  background-image: url(http://tekkkz.com/css/twitter.png);
}
.posts,
.posts li {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
.posts li {
  margin-bottom: 1em;
}
.title {
  font-size: 1.2em;
}
.date {
  font-style: italic;
  font-size: 0.8em;
  color: #bbb;
}
h1 {
  font-family: Arial, sans-serif;
  font-size: 3em;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
h2,
h3 {
  font-family: Arial, sans-serif;
  font-weight: bold;
  margin: 10px 0;
  color: #fff;
}
footer {
  text-align: center;
  font-size: 0.9em;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="author" content="Martin Fischer">
  <meta name="description" content="Personal Profile of Tekkkz (Martin Fischer)">
  <meta name="keywords" content="pc, personal, profile, web, tekkkz, microcontroller, programming, gaming, avr, atml, s4, s4league, aeriagames, english, german">
  <meta name="robots" content="FOLLOW,INDEX">

  <title>Tekkkz - Personal Profile</title>

</head>

<body>
  <header>
    <h1>Tekkkz (Martin Fischer)</h1>
  </header>

  <div class="center">
    <a href="https://twitter.com/Tekkkz_" title="Twitter" class="icon" id="twitter" target="_blank">Twitter</a>
    <a href="https://github.com/Tekkkz" title="GitHub" class="icon" id="github" target="_blank">GitHub</a>
  </div>

  <div class="content">
    <h2>ABOUT</h2>
    <dl>
      <dt><img src="http://tekkkz.com/css/profile.jpg" alt="profile" height="135em" /></dt>
      <dd>
        <p>I am Martin Fischer, otherwise known online as Tekkkz. I am 17 years old and currently a student at the 'Winckelmann Gymnasium Stendal'.</p>
        <p>My educational interests include mathematics and science, especially physics and chemistry. My extracurricular interests include everything that has to do with electronics, from simple soldering up to programming microcontrollers and develop complex
          PCB's, general programming in C and C++ as well as linux and servers.</p>
        <p>See my <a href="./cv.pdf" target="_blank">CV</a>.</p>
      </dd>
      <dl>
  </div>

  <div class="content">
    <h2>CONTACT</h2>
    <dl>
      <dt>Email</dt>
      <dd>martin@Tekkkz.com</dd>

      <dt>IRC</dt>
      <dd>Tekkkz on Freenode</dd>

      <dt>ICQ</dt>
      <dd>ICQ Number: 612184097</dd>
    </dl>
  </div>

  <div class="bottom-content">
    <div class="content-small" style="float: left;">
      <h2>ARTICLES</h2>
      <ol class="posts">
        <li>
          <a href="./posts/2015-02-06-euzebox-with-atmega1284.html" target="_blank" class="title">&ldquo;EUzebox with ATmega1284&rdquo;</a>
          <span class="date">&mdash;February 06, 2015</span>
          <br />
          <span class="description">Instruction set to build an EUzebox with an ATmega1284</span>
        </li>
      </ol>
    </div>
    <div class="content-small" style="float: left; margin-left:36px;">
      <h2>ARTICLES</h2>
      <ol class="posts">
        <li>
          <a href="./posts/2015-02-06-euzebox-with-atmega1284.html" target="_blank" class="title">&ldquo;EUzebox with ATmega1284&rdquo;</a>
          <span class="date">&mdash;February 06, 2015</span>
          <br />
          <span class="description">Instruction set to build an EUzebox with an ATmega1284</span>
        </li>
      </ol>
    </div>
  </div>
</body>

</html>

并排放置 2 个盒子 [div's]

Place 2 Boxes [div's] side by side

html

css

distance