0
基本的に私は次のようなことを試みています。 2 div's
を含む容器はもちろんcontentmain
である。問題のあるdivが親の中で隣り合わせに配置されている
--------|-------
| | |
| | |
|updates|tweet |
| | |
| | |
| | |
|_______|______|
私は現在、アップデートが何らかの理由で全幅に渡って広がっているという問題があります。また、注目に値する何か。これはdiv
の中にあり、contain
と呼ばれています。以下はすべてのコードです。私は私の質問は、contain
の背景がコンテンツ上に拡大することを保証しながら、上記の図をどのように達成するのだろうかと思いますか?
HTML
<div id="contentmain">
<br/>
<div class="updates">
<div id="banner"> Update: 31/12/10</div>
<p> Content </p>
<div id="banner"> Update: 31/12/10</div>
<p> content2 </p>
</div>
<div class="tweet"> </div>
<br/>
</div>
CSS
#contentmain {
width: 800px;
overflow: hidden;
margin-left: auto;
margin-right:auto;
}
#updates {
width: 400px;
float: left;
margin-left: auto;
margin-right:auto;
}
.tweet .tweet_list, .query .tweet_list {
-webkit-border-radius: .5em;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #D8D8D8;
}
.tweet .tweet_list .awesome, .tweet .tweet_list .epic, .query .tweet_list .awesome, .query .tweet_list .epic {
text-transform: uppercase; }
.tweet .tweet_list li, .query .tweet_list li {
overflow-y: auto;
overflow-x: hidden;
padding: 0;
}
.tweet .tweet_list li a, .query .tweet_list li a {
color: #0C717A;
padding: 0px;
}
.tweet .tweet_list .tweet_even, .query .tweet_list .tweet_even {
background-color: #D8D8D8; }
.tweet .tweet_list .tweet_avatar, .query .tweet_list .tweet_avatar {
padding-right: 5px; }
.tweet .tweet_list .tweet_avatar img, .query .tweet_list .tweet_avatar img {
vertical-align: middle;
}
#contain {
background-color:#FFFFFF;
width: 800px;
margin-left: auto ;
margin-right: auto ;
padding: 7px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
-ms-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
border: 1px solid #f0f0f0;
border-bottom: 2px solid #ccc;
}
doh!それは問題だった:)感謝.. ugh ..永遠に過ごした..とてもシンプル。 – Skizit
@Ulkmun Firebugを使用すると、時間が大幅に節約できます:) –