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 的内容：在此处输入图像描述 内容 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

像这样的 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 回答
1

如果你想要固定位置，你可以制作几个 div 并将它们的left属性更改为你喜欢的。您可以使用%定位，使它们在不同分辨率下看起来几乎相同。

但是，我建议float在固定容器中使用<div>，并结合margins 的 @jmeas 建议。像这样的东西：

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 回答