我嘗試將兩個文本塊並排排列。你可以幫我嗎?將2個文本塊並排排列
事情是這樣的:
如果頁面的大小時,我想爲中心的2個街區。我無法並排放置我的積木。
我在這裏創建的jsfiddle爲出發點:http://jsfiddle.net/LpJBm/2/
感謝。
我嘗試將兩個文本塊並排排列。你可以幫我嗎?將2個文本塊並排排列
事情是這樣的:
如果頁面的大小時,我想爲中心的2個街區。我無法並排放置我的積木。
我在這裏創建的jsfiddle爲出發點:http://jsfiddle.net/LpJBm/2/
感謝。
浮動div和他們包裹爲中心:http://jsfiddle.net/Xj5Wy/
嘗試
#block1
{
margin: 10px 20px;
padding: 20px;
width: 400px;
float: left;
}
#block2
{
background-color: #F5F5F5;
margin: 10px 20px;
padding: 20px;
width: 180px;
margin-left:400px;
}
就飄起了灰色框右:
#block2 {
background-color: #F5F5F5;
margin: 10px 20px;
padding: 20px;
width: 180px;
float: right;
}
和交換的HTML的順序:
<div id="block2">
Nos bureaux sont ouverts du lundi au vendredi de 9h00 à 17h00
</div>
<div id="block1">
Merci d'avoir utilisé notre plateforme...
</div>
http://jsfiddle.net/Eric/LpJBm/8/
居中的框是一個單獨的問題。水平居中東西,在一個div包裹它,並應用
.wrapper {
margin: auto;
width: 400px; /*The width you want it to be when centered*/
/* min-width works too */
}
在你的情況,你還需要overflow: hidden
,以迫使您的包裝來包含浮動。
我認爲這是最好的主意。也給第一個右邊距和一些填充物 - 像這樣http://jsfiddle.net/thebabydino/LpJBm/11/ – Ana
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#block2
{
background-color: #F5F5F5;
margin: 10px 20px;
padding: 20px;
width: 180px;
}
</style>
</head>
<body>
<div id="block1" style="float:left;">
Merci d'avoir utilisé notre plateforme...
</div>
<div id="block2" style="float:right;">
Nos bureaux sont ouverts du lundi au vendredi de 9h00 à 17h00
</div>
</body>
</html>
嘗試這樣的......... u得到回答
您是否嘗試過使用'浮動:權利;'在CSS中的塊2? – Steve
@Steve:您還需要交換HTML元素的順序 - 請參閱我的答案。 – Eric
你是什麼意思集中?你想要一個固定的寬度嗎? – Eric