1

我有一些 css 代码应该像这样排列 html 标签：（一个编辑过的图像，显​​示我想如何用 css 排列元素）
在此处输入图像描述
这是我的 css 样式的代码：

.hbox
{   margin-top:15px;
width:100%;     
-webkit-box-shadow:0 1px 5px rgba(0, 0, 1, 0.3), 0 0 4px rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow:0 1px 5px rgba(0, 0, 1, 0.3), 0 0 4px rgba(0, 0, 0, 0.1) inset;
        box-shadow:0 1px 5px rgba(0, 0, 1, 0.3), 0 0 4px rgba(0, 0, 0, 0.1) inset;
}
.hbox p{
margin-top:-8%;
margin-left:25px;
padding-bottom:6px;
font-size:12px;
color:#859489;
text-shadow:#6F7678 0px 0px 1px;
}
.hbox h3{
position:relative;
top:0px;
margin-left:3px;
font-size:45px;
color:#78A4AD;
text-shadow:#6F7678 0px 1px 2px;
}

所以，我把它放在我的html页面上

<div class="hbox">
<h3>1</h3><p>This is a demo postr<br>lorem ipsum spsum</p>
</div>
<div class="hbox">
<h3>2</h3><p>This is a demo postr</p>
</div>

这个 css 的输出令人沮丧： 在此处输入图像描述


如何完美安排。是我把它弄复杂了。对不起这个愚蠢的问题......我只是在学习CSS......

4

4 回答 4

4

您可以调整值以满足您的需要，但请查看我在这里创建的小提琴：http: //jsfiddle.net/EezLZ/

实际上，我对你的 CSS 做了一些重要的调整，以使用更多的相对值来使所有定位更容易。我在小提琴的 CSS 部分添加了很多评论，也请检查一下，但是对主要更改有一些解释......

.hbox {
  position:relative;
  margin-top:2em;
  padding:0.15em;
  padding-left:3em;
  /* ... */
}

位置：相对

因为hbox是您的主要容器，所以给它，position:relative以便所有子元素都可以根据它的容器定位。没有这个，至少一些浏览器可以使用父容器元素。我们将要相对于它的父级定位大数字，所以这是必要的。

边距顶部：2em

由于我们希望数字与顶部的一部分重叠并且我们希望盒子之间有间距，因此给每个盒子一个 2em 的距离。1em 将覆盖盒子和 1em 之间的一些间距，以帮助解释数字的部分重叠。当然，您可以根据设计的需要调整该值。另请注意，在 EM 中工作将有助于使此设计更易于调整（而不是像素）。

填充：0.15em

在盒子周围给盒子一些标准的填充物。同样，可以根据您的设计需要轻松调整此值。

填充左：3em

我们的愿望是在左边有一个很大的“数字”。我们将“悬停”这个数字，这会将其从文档的“流”中删除。所以，我们需要在盒子里预留一些空间来解决这个问题。否则，框内的内容会在数字下方流动，数字会重叠在上面。

.hbox h3 {
  position:absolute;
  top:-0.5em;
  left:0.1em;
  margin:0;
  padding:0;
  font-size:300%;
}

位置：绝对；

我们对hbox样式的设置导致了这一点。绝对定位您的“数字”元素以将其从流程中移除，并允许您将其放置在与其容器相关的任何位置。

顶部：-0.5em；

top:0会将元素与盒子的顶部齐平。我们想要一点上手，所以我们通过使用负值将它向上移动一点。正值会将元素向下移动，远离顶部。同样，根据您的设计需求调整实际值。

左：0.1em；

就像 top 一样，left:0会将元素与容器的左边缘齐平。我只是给了它一点间距。根据需要进行调整。

边距：0；填充：0；

浏览器可以为元素提供默认的填充/边距。将这些设置为零，这样它们就不会干扰设计。

字体大小：300%；

使用百分比（或 EM）作为字体大小（相对于像素）。这有助于保持更简洁的设计并更准确地调整您的元素。现在您知道这个数字比基本字体“大 3 倍”。如果基本字体是 1em，则 3em 是 3 倍大。这可以帮助您调整填充/边距，而无需猜测像素大小。如果你的基本字体大小发生变化，一切都应该相对缩放。

.hbox p {
  font-size:75%;
  color:#859489;
  text-shadow:#6F7678 0px 0px 1px;
}

请注意，您无需尝试定位内容，因为您设置了容器和标题来执行此操作。您只需要根据需要对其进行样式设置。

弱点

Note item of note... 这种设计的弱点可能是绝对定位的数字。因为它已从工作流程中删除，几乎没有内容的容器框可能会导致数字也与底部边缘重叠，对于足够大的数字（即，如果您将标签的字体大小增加到足够大并且您有一个线，填充很少）。

这个弱点应该是次要的，因为您必须拥有相当大的字体大小和足够小的内容才能发生这种情况，但这可能是一种极端情况。

我希望这会有所帮助！

干杯!

于 2013-03-14T14:15:54.203 回答
1

你试过放进text-align:center;去吗

 .hbox p{
margin-top:-8%;
margin-left:25px;
padding-bottom:6px;
font-size:12px;
color:#859489;
text-shadow:#6F7678 0px 0px 1px;
}
于 2013-03-14T13:39:46.560 回答
1

像这样怎么样：jsfiddle.net/xGyN8/ 我只是添加

.hbox h3{
    display:inline;
    top:-20px;
 }
.hbox p{
    text-align:center;
    margin-top:-10%;  
 }
于 2013-03-14T13:51:37.233 回答
1

如果您可以为.hbox指定宽度和高度，这将起作用：

.hbox
{   
    margin-top:15px;
    width:300px;
    height: 70px;    
    -webkit-box-shadow:0 1px 5px rgba(0, 0, 1, 0.3), 0 0 4px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 5px rgba(0, 0, 1, 0.3), 0 0 4px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 5px rgba(0, 0, 1, 0.3), 0 0 4px rgba(0, 0, 0, 0.1) inset;
    position:relative; 
}
.hbox p{
    top:-8%;
    left:55px;
    padding-bottom:6px;
    font-size:12px;
    color:#859489;
    text-shadow:#6F7678 0px 0px 1px;
    position:absolute;
}

.hbox h3{
    font-size:45px;
    color:#78A4AD;
    text-shadow:#6F7678 0px 1px 2px;
    position:absolute;
    left:10px;
    top:-60px;
}

JSfiddle：http: //jsfiddle.net/39j8n/

于 2013-03-14T13:55:16.470 回答