將div與CSS並排對齊
[英]Align divs side by side with CSS
問題描述
我想將我的三個中間div元素並排放置，中間div的寬度最大，另外兩個固定尺寸
<div>
<div style="width:50px; height; 50px;">Image</div>
<div>Some Text</div>
<div style="width:20px; height; 50px;">Image</div>
</div>
6 個解決方案
解決方案1
1 已采納 2011-04-21 01:27:40
我覺得您沒有嘗試使用Google搜索，但是，我感覺很好
抱歉，這里是jsfiddle工作的http://jsfiddle.net/austinbv/YbCmH/
<div>
<div id="first" >Image</div>
<div id="second">Some Text</div>
<div id="third" >Image</div>
</div>
的CSS
div > div {
position: absolute;
height: 50px;
}
#first {
background: red;
left: 0;
width: 50px;
}
#second {
background: blue;
left: 50px;
right: 50px;
}
#third {
background: green;
right: 0px;
width: 50px;
}
解決方案2
1 2011-04-21 01:28:50
解決方案3
0 2011-04-21 02:00:16
使用CSS定位，特別是絕對定位：絕對定位最左邊和最右邊的元素，並使用margin為它們保留空間。
假設中間列將始終比其他列高：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Align divs side by side with CSS</title>
<style type="text/css">
div { border:1px solid red; } /* just for demo purposes */
</style>
</head>
<body>
<div style="position: relative; top: 0px; left: 0px;">
<div style="position:absolute; left:0px; top:0px; width:50px; height:50px;">Image</div>
<div style="margin-left:50px;margin-right:20px;">Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br /></div>
<div style="position:absolute; top:0px; right:0px; width:20px; height:50px;">Image</div>
</div>
</body>
</html>
解決方案4
0 2011-04-21 03:29:47
這可能起作用：（但在ie7中不能正常使用）
<div style="height:300px;background:#ddd;border:1px solid red;float:left;text-align:center" id="container">
<div style="height:175px;width:100px;background:#CF9;border:1px solid #C0C;float:right" class="box">Image</div>
<div style="height:150px;width:auto;background:orange;border:1px solid #404040;float:right" class="box">Here is some text</div>
<div style="height:300px;width:100px;background:green;border:1px solid yellow;float:left;text-align:center" class="box">Image</div>
</div>
解決方案5
0 2011-04-21 06:05:57
您必須對具有高度和寬度屬性的每個div使用左浮點
解決方案6
-1 2011-04-21 01:32:18
這為我工作：
<html>
<head>
<style type="text/css">
div {
color: white;
font-size: 14px;
font-weight: 800;
}
div.end {
width: 50px;
height: 50px;
}
div.left {
float: left;
background: red;
}
div.right {
float: right;
background: blue;
}
div.container {
background: green;
height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="end left">Image</div>
Some Text
<div class="end right">Image</div>
</div>
</body>
</html>
CSS並排對齊2個div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.