1

ページの下部に div があります。そのCSSは次のとおりです。

#news-bottom {
color: white;
position: fixed;
white-space: nowrap;
overflow: hidden;
height: 66px;
bottom: 0;
right: 390px;
left: 180px;
padding: 5px;
border: 1px solid #CCC;
background-color: black;
}

そして、画像のようなdivのコンテンツがあります: ここに画像の説明を入力 content html:

<span>
    <span><b>Teste</b></span>
    <span>Teste com BBCodes</span>
    <img style="border: 1px solid #CCC; padding:2px; margin-left: -3px;" src="images/news/empty.png">
 </span>

div のコンテンツを次のように表示するにはどうすればよいですか。 ここに画像の説明を入力

divの位置が固定されているので改行や表が使えず、どうしたらいいのかわからない…

4

2 に答える 2

1

固定位置が必要な場合は、いくつかの div を作成し、それらのleftプロパティを好きなものに変更できます。配置を使用%して、異なる解像度でほぼ同じに見えるようにすることができます。

ただし、float固定コンテナー<div>で使用することをお勧めし、@jmeas の提案と組み合わせて使用​​することをお勧めしmarginます。このようなもの：

HTML

<div class='container'>
    <div class='arrow'></div>
    <div class='item'>One</div>
    <div class='item'>Two</div>
    <div class='item'>Three</div>
    <div class='arrow'></div>
</div>

CSS 

#container {
   ...fixed...
}

.arrow {
   float:left;
   width:10%;
}

.item {
   float:left;
   margin-left:5px;
   width:20%;
}
于 2012-10-25T00:10:42.937 に答える
1

この JSFiddleのようなものが動作するはずです。

background-colorコンテナの子に を適用しますdiv。次に、それらpaddingの間にスペースを作成するいくつかの を与えます。出来上がり！

HTML:

<div id="news-bottom">
  <span>
    <span><b>Teste</b></span>
    <span>Teste com BBCodes</span>
    <img style="border: 1px solid #CCC; padding:2px; margin-left: -3px;" src="images/news/empty.png">
 </span>

CSS:

 #news-bottom {
   color: white;
   position: fixed;
   white-space: nowrap;
   overflow: hidden;
   height: 66px;
   bottom: 0;
   right: 390px;
   left: 180px;
   padding: 5px;
   border: 1px solid #CCC;
 }
 #news-bottom span span,
 #news-bottom span img {
   background-color: black;
   padding: 5px;
 }​​
于 2012-10-25T00:04:03.407 に答える