類div中無法正確顯示

-1

所以這裏是我的問題，我有一個名爲div和tiles這裏面的div是多個類，tile-small和tile-large。現在，每個類都具有不同的屬性，例如tile-large類的寬度值較大，而tile-small的寬度值較小，現在這些屬性似乎正確顯示，但每個類都具有由div定義的屬性tiles。多個班級應顯示#fff的背景顏色，tile-large班似乎正在顯示背景顏色，但tile-small班不是。我如何糾正我的代碼，並讓兩個類都顯示我在div中定義的背景顏色？類div中無法正確顯示

下面是整個HTML代碼; （隨着一個<style>標籤的CSS值。）

<html> 
<head> 
    <title>NowFootball | Home</title> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
    <style> 
    @font-face { font-family: title; src: url('fonts/title.ttf'); } 
    body {background-color: #efefef;margin-top: 15px;} 
    ::selection { 
    background: #93CC04; /* WebKit/Blink Browsers */ 
} 
::-moz-selection { 
    background: #93CC04; /* Gecko Browsers */ 
} 
    #content { 
     margin-left: auto; 
     margin-right: auto; 
     width: 97%; 
    } 
    #tiles { 
     background-color: #fff; 
     height: 200px; 
     margin-left: auto; 
     margin-top: auto; 
     border: 0px; 
     border-style: solid; 
     border-color: #fff; 
     box-shadow: 5px 0 5px -5px #CCC, 0 5px 5px -5px #CCC, -5px 0 5px -5px #CCC; 
    } 
    .tile-large { 
     background-color: #C4E66E; 
     height: 50px; 
    } 
    .tile-small { 
     background-color: #C4E66E; 
     height: 50px; 
     width: 50%; 
     margin-top: 5%; 
    } 
    .center-text { 
     text-align: center; 
     color: #1f1f1f; 
    } 
    .left-text { 
     float: left; 
     color: #F7F7F7; 
     line-height: 40px; 
     padding: 5px; 
     font-family: title; 
     font-size: 18px; 
    } 
    h2 { 
     line-height: 100px; 
    } 
    </style> 
</head> 
<body> 

<div id="content"> 
     <div id="tiles"> 
      <div class="tile-large"><p class="left-text">Is there football on Wednesday?</p></div> 
      <h2 class="center-text">Yes, there is football on Wednesday the 14th of January.</h2> 

      <div class="tile-small"><p class="left-text">Attending Players</p></div> 
     </div> 
</div> 
</body> 
</html>

這裏顯示的是我的問題的圖像。

enter image description here

正如你所看到的，第二類（下白盒的綠色條）沒有背景顏色添加到它。

下面是我想要我的代碼顯示;

enter image description here

來源

2015-01-13 MyNameIsNotSoCool

我真的不明白......你設置' height：200px;'給父類＃並問爲什麼你的'。-small'沒有白色背景？（同時提出問題嘗試更具描述性使用*顏色名稱*使您的問題更容易理解） –

我試圖解決的是爲什麼我的瓷磚小班不完全像瓷磚大班，大（在圖片中顯示的正確顯示，我想要的是有這個瓷磚的確切副本，但更小的寬度。 – MyNameIsNotSoCool

您是否意識到，您將'.tile - ***'包裹在白色陰影背景的父' ＃tiles'？比你已經設置父母的高度爲'200px'並且期待孩子'-small'擁有白色背景？ –

正如我在我的意見，你的問題已經說了，你不能做你做什麼。這是完全錯誤的。

相反這裏是一個很好的（簡化）例如如何風格你的CSS，與期望的結果：

*{margin:0;} 
 

 
h3{ /*Style your selectors here, not all around the stylesheet*/ 
 
    background: #C4E66E; 
 
    padding: 0.7em; 
 
} 
 
p{ /* Styles for all your paragraph elements */ 
 
    padding: 0.4em 0.7em; 
 
} 
 
#content{ /* no white background or similar. it's a container, use it as such */ 
 
    margin: 0 auto; 
 
    width: 97%; 
 
} 
 
.tile{ /* General .tile styles (applies to all .tile) */ 
 
    background: #fff; 
 
    box-shadow: 0 2px 3px #CCC; 
 
    float: left; 
 
    margin: 10px 1%; 
 
} 
 
.tile-large{ width: 98%; } /* Than create an additional class for "large" ones */ 
 
.tile-small{ width: 48%; } /* and for "small" ones */

<div id="content"> 
 

 
    <div class="tile tile-large"> 
 
    <h3>Is there football on Wednesday?</h3> 
 
    <p>Hello world</p> 
 
    </div> 
 

 
    <div class="tile tile-small"> 
 
    <h3>Attending Players</h3> 
 
    <p>Hello CSS</p> 
 
    <p> 
 
     Hello again and another paragraph here<br> 
 
     Lorem ipsum sackus overflovius 
 
    </p> 
 
    </div> 
 

 
    <div class="tile tile-small"> 
 
    <h3>match results</h3> 
 
    <p> 
 
     Hello again and another paragraph here<br> 
 
     Lorem ipsum sackus overflovius 
 
    </p> 
 
    </div> 
 

 
</div>

來源

2015-01-13 03:11:38

謝謝。這就是我所要求的！非常感謝您的幫助:) – MyNameIsNotSoCool

@MyNameIsNotSoCool歡迎您！請考慮我的代碼示例中的所有評論。此外，如果您遇到浮動元素問題，請查看答案'如何正確清除浮動元素'或查找'微型浮動元素hack'（稱爲.clearfix）。或者簡單地用「clear：both;」來包裝你的行，以防止下面的其他元素堆棧在錯誤的地方。快樂的編碼。 –

我會再次感謝！ – MyNameIsNotSoCool

-1

這似乎是一個非問題。 #tiles div的#fff樣式適用於所有未覆蓋的元素。因此，如果在.tile-small以下有更多文字，#tiles的白色背景將適用於此。

來源

2015-01-13 02:43:16

-1

改變你的CSS和HTML到這個。它會顯示你想要的。

<style> 
@font-face { font-family: title; src: url('fonts/title.ttf'); } 
body {background-color: #efefef;margin-top: 15px;} 
::selection { 
background: #93CC04; /* WebKit/Blink Browsers */ 
} 
::-moz-selection { 
background: #93CC04; /* Gecko Browsers */ 
} 
#content { 
    margin-left: auto; 
    margin-right: auto; 
    width: 97%; 
} 
#tiles { 
    background-color: #fff; 
    height: 200px; 
    margin-left: auto; 
    margin-top: auto; 
    border: 0px; 
    border-style: solid; 
    border-color: #fff; 
    box-shadow: 5px 0 5px -5px #CCC, 0 5px 5px -5px #CCC, -5px 0 5px -5px #CCC; 
} 
#tiles2 { 
    background-color: #fff; 
    height: 200px; 
    width: 50%; 
    float:left; 
    margin-left: auto; 
    margin-top: auto; 
    border: 0px; 
    border-style: solid; 
    border-color: #fff; 
    box-shadow: 5px 0 5px -5px #CCC, 0 5px 5px -5px #CCC, -5px 0 5px -5px #CCC; 
} 
.tile-large { 
    background-color: #C4E66E; 
    height: 50px; 
} 
.tile-small { 
    background-color: #C4E66E; 
    height: 50px; 
    width: 50%; 

} 
.center-text { 
    text-align: center; 
    color: #1f1f1f; 
} 
.left-text { 
    float: left; 
    color: #F7F7F7; 
    line-height: 40px; 
    padding: 5px; 
    font-family: title; 
    font-size: 18px; 
} 
h2 { 
    line-height: 100px; 
} 
</style>

，改變你的HTML

<div id="content"> 
    <div id="tiles"> 
     <div class="tile-large"><p class="left-text">Is there football on Wednesday?</p></div> 
     <h2 class="center-text">Yes, there is football on Wednesday the 14th of January.</h2> 
    </div> 
    <br> 
    <div id="tiles2"> 
     <div class="tile-small"><p class="left-text">Attending Players</p></div> 
    </div>

來源

2015-01-13 02:45:36

爲什麼選擇downvote正確的答案？ –

您得到了一個downvote可能會導致您的答案是過量的CSS樣式和不必要的ID。顯然不是一個好的做法可以遵循。 –

我想不是拿他的代碼，只是翻轉它，我應該改寫它正確的方式。雖然這確實顯示正確，但它是邪惡的;你是對的。 –

-1

的問題是，手動設置的高度爲磚DIV和內容延伸低於該點。即使內容將繼續經過背景停止的位置，Adam所指出的背景將只有200像素高。

但是，如果您真正想要做的是讓背景與所有內容的高度匹配，請完全忽略該行。只需將瓷磚樣式更改爲：

#tiles { 
    background-color: #fff; 
    margin-left: auto; 
    margin-top: auto; 
    border: 0px; 
    border-style: solid; 
    border-color: #fff; 
    box-shadow: 5px 0 5px -5px #CCC, 0 5px 5px -5px #CCC, -5px 0 5px -5px #CCC; 
}

我附上了一個jsfiddle鏈接來演示。

http://jsfiddle.net/hytvg22c/

來源

2015-01-13 02:53:42 Llewey

這並沒有回答這個問題。 OP缺少一些關於使用CSS構建HTML代碼和樣式元素的基本知識 –

不，不。頂部瓷磚顯示我也想要它，我想有一個精確的瓷磚副本，但寬度值較小，我已經在上面添加了一個額外的圖像來演示我正在嘗試工作:)感謝您提供你的幫助！ – MyNameIsNotSoCool

這並不是說它沒有回答這個問題，而是這個問題很糟糕。雖然詳細闡述，但很明顯，你的答案是他現在需要的，Roko。 – Llewey

類div中無法正確顯示

回答

相關問題