將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

您需要申請浮動留給兩個框，並設置與容限創建一個包裝適當價值的權利。

刪除風格從這個：

<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 2

這些2格

<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 3

使用內聯樣式（將樣式標籤放入元素內）絕不是一件好事，最好的做法是將所有內容保存在單獨的樣式表中，並且更加實用。

關於你的問題，你幾乎已經在你的樣式表中的代碼，只是刪除內聯樣式，並把兩個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; 
} 

你可能會想，現在調整寬度和利潤率的內容小班到您的偏好。

希望這會有所幫助！

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>