除了容器外還有四個div的CSS樣式DIV

我想寫一個CSS腳本，除了第五個div作爲容器外還包含4個div。除了容器外還有四個div的CSS樣式DIV

Div 1應該位於頂部作爲標題，Div 2應位於容器右側的中心，Div 4（Containing img src）應位於容器的中心，Div 3應該在圖像的底部。

我有一個腳本作爲試用，但它不像我想要的（Iam初學者在CSS中）。

<html xmlns="http://www.w3.org/1999/html"> 

<head> 
<title> </title> 

<meta charset="utf-8"> 

<style> 

    #siena img { 

     display: inline-block; 
     margin-left: 0px; 

    } 

    #Container 
    { 
     margin-bottom: 3pc; 
     text-align: center; 
     border-width:2px; 
     border-color: #46b8da ; 
     margin-right: 100px; 
     margin-left: 100px; 
     border-style: solid; 
     background-color :#c4e3f3; 
     padding :10%; 


    } 
    #link 
    { 
     display: inline-block; 

    } 
    #price 
    { 
     top:100px; 
     width:50% 
      margin:0 auto; 
     float:right; 
    } 
</style> 
</head> 

    <body> 


    <meta charset="utf-8"> 
    <h1 style="text-align: center;"> Text </h1> 



    <div id="Container" > <p> 
    <div id="siena" > 
    Text 

    <img src='http://www.traidnt.net/vb/attachments/480574d1272729780-no_pic.gif'> 
      <div id="price" > 
      price 
     </div> 


    </div> 

    <div id="link" > 
     <a href='https://www.google.com/?gws_rd=ssl' > </a> 

    </div> 
</div> 




</body> 
</html>

來源

2015-10-11 JavaFan

你需要html代碼和css代碼才能使它工作，你能告訴我們你到目前爲止做了什麼嗎？ – turbopipp

我編輯了我的代碼 – JavaFan

爲了幫助您瞭解錯誤發生的位置，我創建了[colorcoded jsfiddle]（http://jsfiddle.net/turbopipp/7tzce63q/）。我建議將來在不同的DIV中添加背景顏色，以便更容易理解/學習如何使用DIV和CSS進行構建。 – turbopipp

我試圖像在CSS

.container{ 
 
    width: 90%; 
 
    border: 1px solid brown; 
 
    height: 500px; 
 
} 
 
.top, .bottom{ 
 
    margin-top: 10px; 
 
    width: 90%; 
 
    height: 100px; 
 
    border: 3px solid red; 
 
    margin-bottom: 10px; 
 
} 
 
.left, .right{ 
 
    display: inline-block; 
 
    width: 50%; 
 
    border: 3px solid maroon; 
 
    height: 200px; 
 
} 
 
.right{ 
 
    display: inline-block; 
 
    width: 40%; 
 
    margin-left: 5%; 
 
}

<div class="container"> 
 
\t \t <div class="top"></div> 
 
\t \t <div class="left"></div> 
 
\t \t <div class="right"></div> 
 
\t \t <div class="bottom">bottom</div> 
 
</div>

編輯複製，因爲你問起圖像重疊另一格。

以下內容將使圖片不會超出它的容器，因此圖片不會與任何其他div重疊。

.left img{ 
    width: 100%; 
    max-width: 100%; 
    max-height: 100%; 
}

這是你的意思嗎？

來源

2015-10-11 10:31:31

圖像可能與另一個divs重疊如何避免這種情況？ – JavaFan

我在答案中添加了一個部分。基本上包括'最大寬度：100％'到img以防止img與另一個div重疊。它有幫助嗎？ –

不錯。我也希望頂部div上的文字位於底部，左側div上的文字如何做到這一點？ – JavaFan

您的標記看起來無效。

您在標籤內有不必要的空格，並且沒有關閉p標籤。

你可以實現你通過這個標記想要的東西：

<div id="container"> 
    <div id="header">Div 1</div> 
    <div id="content">Div 4</div> 
    <div id="side-content">Div 2</div> 
    <div id="footer">Div 3</div> 
</div>

然後用CSS的元素的位置：

#container { 
    width: 100%; 
} 

div { 
    border: 1pt solid black; 
    padding: 5px; 
    text-align: center; 
} 

#content { 
    width: 70%; 
    float: left; 
}

http://jsfiddle.net/7dqagh7s/

此外，我會建議使用樣式表而不是直接將代碼與標記內聯。

來源

2015-10-11 10:25:21

除了容器外還有四個div的CSS樣式DIV

回答

相關問題