Question

在我的项目中，我想显示如下文字： -

  Title
Name  Date
details

但我得到了： -

  Title
Namedetails
  Date

这是我的jsfiddle链接： - jsfiddle

哪里有问题??

Answer 1

以下是查看结果的fiddle。

以下是我的更改：

.A > div{
    margin-right: 5px;
}

#title{
    font-size: 100%;
}
#details{
    font-size:100%;
    float: left;
    clear: both;
    display: inline-block;
}

#block1 {
  float: left;
  display: block;

}

#block2 {
    float: left;
    clear: right;
}

您已添加#title两次，我在此处将其替换为details并添加了上述css规则：

<div id= "details">
     <a>details</a>
</div>

对于建议，使用应用于多个元素的通用css规则到单个类中，并将该类添加到所有元素中。不要重复css规则。

Answer 2

好的，当你已经向同一个元素添加了float: left时，没有必要添加clear: both。相反，将#title添加到#title { font-size: 100%; clear: both; } #block1 { float: left; display: block; } #block2 { float: left; display: block; } .A { position: relative; margin: 40px 0; height: 100px; width: 200px; background: #eee; } .A:after { content: " "; display: block; background: #c00; height: 29px; width: 100%; position: absolute; bottom: -29px; }，以便它将堆叠在所有元素的底部：

{{1}}

Answer 3

试试这个

.A div{
    padding:2px;
}
#title{
    font-size:100%;
}

#block1 {
  float: left;
  display: inline-block;

}

#block2 {

 display: inline-block;
clear:left;
}
.A {
    position: relative;
    margin: 40px 0;
    height: 100px;
    width: 200px;
    background: #eee;
}

.A:after {
    content: " ";
    display: block;
    background: #c00;
    height: 29px;
    width: 100%;
    position: absolute;
    bottom: -29px;
}

<强> Demo Here

或

我简化了你的css代码。

使用此

#title{ font-size:100%; } #block1 , #block2{ display: inline-block; } .A { position: relative; margin: 40px 0; height: 100px; width: 200px; background: #eee; } .A:after { content: " "; display: block; background: #c00; height: 29px; width: 100%; position: absolute; bottom: -29px; }

<强> Demo Here

在css中如何显示多个div？

3 个答案: