三個div彼此相鄰
[英]Three divs next to each other
問題描述
我已經嘗試了一段時間，以使三個div彼此相鄰。 但是，應該位於右側的位置並不位於其他位置的旁邊。 有點跳下來。 如下圖所示。
這是代碼：
#left {
margin: auto;
width: 30%;
padding: 10px;
float: left;
height: auto;
}
#middle {
margin: auto;
width: 30%;
padding: 10px;
height: auto;
}
#right {
margin: auto;
width: 30%;
padding: 10px;
float: right;
height: auto;
}
7 個解決方案
解決方案1
1 2017-10-06 12:07:41
我建議使用display:flex; 並使用flex-direction: row | row-reverse | column | column-reverse;指定所需的flex flex-direction: row | row-reverse | column | column-reverse; flex-direction: row | row-reverse | column | column-reverse;
另外，您還應該將這些CSS屬性附加到包含所有三個div的<div></div>上。
您可以在這里找到關於此的所有信息： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/
解決方案2
0 2017-10-06 12:40:45
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic List Group</h2>
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
</div>
</body>
</html>
解決方案3
0 2017-10-06 13:14:40
<style> *{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.span3{
width:33.33%;
float:left
height:250px;
display:block;
clear:both}
</style>
<div class="wrapper">
<div class="span3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,</div>
<div class="span3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,</div>
<div class="span3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,</div>
</div>
解決方案4
0 2017-10-09 06:03:17
使用display: grid父元素上的display: grid ，
HTML：
<div class="wrapper">
<div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
CSS：
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr; //defines how many columns (fr means fraction, so in this case .wrapper is divided in three equal fractions)
grid-column-gap: 10px //space between elements
}
更多內容： CSS網格
解決方案5
0 2017-10-09 06:10:09
使用引導網格系統
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
Add在您的CSS中添加以下源：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
解決方案6
0 2017-10-09 07:50:26
您可以使用display:inline-block而不是float:left簡單解決
#left {
display: inline-block;
width: 30%;
height: auto;
}
#middle {
display: inline-block;
width: 30%;
height: auto;
}
#right {
display: inline-block;
width: 30%;
float: right;
height: auto;
}
我建議使用display:inline-block 。
如果可以使用display:inline-block ，則可以編寫干凈的代碼
解決方案7
0 2017-10-09 12:53:55
使用Bootstrap Grid系統（ latest version bootstrap@4.0.0-beta ）
Bootstrap的grid system使用一系列容器，行和列來布局和對齊內容。 它是使用flexbox構建的，並且具有fully responsive 。 下面是一個示例，並深入研究了網格如何組合在一起。
學習https://getbootstrap.com/docs/4.0/layout/grid/或使用
Bootstrap Flex
使用全套響應式flexbox實用工具快速管理grid columns ， navigation ， components的layout ， lignment和sizing 。 對於更復雜的實現，可能需要自定義CSS 。
將三個div居中對齊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.