我想把两个方框放在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>
答案 0 :(得分：2)
使用内联样式（将样式标记放在元素内部）绝不是一件好事，最好将所有内容保存在单独的样式表中，并且更实用。
关于你的问题，你几乎已经在样式表中有了代码，只需删除内联样式并将两个div放在父div中。
<强> 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;
}
您可能希望根据自己的喜好调整内容小班的宽度和边距。
希望这有帮助！
答案 1 :(得分：0)
为这两个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>
答案 2 :(得分：0)
您需要将浮动左侧应用于两个框并将边距权限设置为适当的值。
从中删除样式：
<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 */
}
您还可以尝试分别在每个盒子上放置边距以获得所需的结果
答案 3 :(得分：0)
如何在两个文章框周围添加一个封闭的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>
答案 4 :(得分：0)
！[在此处输入图片说明] [1]
这就是你需要做的。底部的两个文章框应该在一个固定宽度为1144px的div内，并且两个内容 - 小应该是浮动的：左边，第二个边距为左边：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">“EUzebox with ATmega1284”</a>
<span class="date">—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">“EUzebox with ATmega1284”</a>
<span class="date">—February 06, 2015</span>
<br />
<span class="description">Instruction set to build an EUzebox with an ATmega1284</span>
</li>
</ol>
</div>
</div>
</body>
</html>