CSS和div的問題

我遇到的問題與圖像，其中左側的彩色塊開始的第二部分，然後在中間的4箇中心的圖像+右側3個段落。我不能讓他們水平對齊，我甚至試圖與他們的寬度/高度+溢出玩：汽車。CSS和div的問題

<!doctype html> 
<head> 
<title>onze titel</title> 
<meta charset="UTF-8"> 
<meta name="description" content="deze html oefenpagina werd gemaakt om de mogelijkheden met audio en video te zien"> 
<link rel="stylesheet" href="css/sheet2.css" type="text/css"> 
</head> 
<body> 
<h1>titel van de webpagina</h1> 
in kleur</br></br></br> 
<div id="inhoud"> 

<div id="cyaan"></div> 
<div id="magenta"></div> 
<div id="geel"></div> 
<div id="rood"></div> 
<div id="groen"></div> 
<div id="blauw"></div> 


<div id="midden"> 
<div id="afb1"></div> 
<div id="afb2"></div> 
<div id="afb3"></div> 
<div id="afb4"></div> 
</div> 

</div> 
</body> 
</html>

而這裏的CSS：

#inhoud { 
    width: 500px; 
    border: 1px solid black; 
    overflow: auto; 
} 
#cyaan {width: 120px; 
height: 25px; 
background: cyan;} 

#magenta {width: 120px; 
height: 25px; 
background: magenta;} 

#geel {width: 120px; 
height: 25px; 
background: yellow;} 

#rood {width: 120px; 
height: 25px; 
background: red;} 

#groen {width: 120px; 
height: 25px; 
background: green;} 

#blauw {width: 120px; 
height: 25px; 
background: blue;} 

#midden { 
    margin-left: auto ; 
    margin-right: auto ; 
     width: 100%; 
    } 

#afb1 { 
    float: left; 
    width: 15%; 
    height: 100px; 
    background-image: url('../img/lima.jpg'); 
    } 

#afb2 { 
    float: left; 
    width: 15%; 
    height: 100px; 
    background-image: url('../img/schu.jpg'); 
    } 

#afb3 { 
    clear: left; 
    float: left; 
    width: 15%; 
    height: 100px; 
    background-image: url('../img/car.jpg'); 
    } 

    #afb4 { 
    float: left; 
    width: 15%; 
    height: 100px; 
    background-image: url('../img/model.jpg'); 
    }

enter image description here

來源

2015-05-14 Thomas Jaens

應該如何看起來像：http://i.stack.imgur.com/PxQwK.jpg –

你的代碼不包含標籤.. – pcs

@saina遺憾？我不知道你在說什麼現在..它的一個簡單的HTML/CSS分配我不能工作，如果我寫的東西錯了我的話題對不起 –

嘗試使用<center>。

事情是這樣的：

<center> 
    <h1>Hello world!</h1> 
</center>

來源

2015-05-14 12:33:40 NiKoLaPrO

謝謝你的評論，但是也沒有做到這一點.. –

我只固定顏色和標題：http://codepen.io/nikolapro/pen/OVNEmM – NiKoLaPrO

下面是一些代碼，可以幫助你得到進一步的:)你只需要更多的閱讀了關於公文流轉，和css位置和顯示性能。

http://codepen.io/anon/pen/rVerQN

#midden { 
    /*margin-left: auto; 
    margin-right: auto; 
    display: inline;*/ 
    position: absolute; 
    top: 90px; 
    left: 150px; 
    width: 200px; 
} 

#afb1 { 
    float: left; 
    width: 50%; 
    height: 100px; 
    background-color:blue; 
    background-image: url('../img/lima.jpg'); 
} 

#afb2 { 
    float: left; 
    width: 50%; 
    height: 100px; 
    background-color:orange; 
    background-image: url('../img/schu.jpg'); 
} 

#afb3 { 
    clear: left; 
    float: left; 
    width: 50%; 
    height: 100px; 
    background-color:green; 
    background-image: url('../img/car.jpg'); 
} 

#afb4 { 
    float: left; 
    width: 50%; 
    height: 100px; 
    background-color:darkred; 
    background-image: url('../img/model.jpg'); 
}

來源

2015-05-14 15:27:10

感謝了一堆的盟友，你是一個天使！欣賞它 –

CSS和div的問題

回答

相關問題