强制内联块在没有br的情况下进行换行

时间:2013-11-20 02:00:57

标签: html css css3

我有一个div,其中包含两个<a>div的宽度大于两个<a>的宽度之和。

我希望两个<a>换行,但不要占用所有div宽度。我希望它们在设置为显示时采用它们通常采用的宽度:inline-block,但是如果设置为display:block则包装。

我需要一个仅限CSS的解决方案。

这是一个jsfiddle来解释我的例子。谢谢!

<div class="content">
    <a>
        <span>content1</span>
    </a>
    <a>
        <span>content2</span>
    </a>
</div>

3 个答案:

答案 0 :(得分:1)

以下是您尝试的一种方式:

div{
    width:300px;
    border: 1px solid red;
    overflow: auto;
}

a{
    display: block;
    background-color: #dddddd;
    float: left;
    clear: both;
}

a浮动到左侧并使用clear: both

overflow: auto应用于父div以保留块中的浮点数。

请参阅演示:http://jsfiddle.net/audetwebdesign/cKW4t/2/

我认为通过想要包裹元素,你的意思是每个元素都从一个新的行开始。

答案 1 :(得分:0)

不确定您要求的是什么,但尝试将display:block / inline-block移动到.content而不是a。

这能解决您的问题吗?

div{
    width:300px;
    border: 1px solid red;
    display: block;
}

a{
    background-color: #dddddd;
}

jsfiddle

答案 2 :(得分:0)

你走了:

a {
    display: inline; 
    background-color: #dddddd;
}
a+a:before {
    content:"\a";
    white-space: pre;
}

我想补充一点,如果div内有内容,或者你的div有最小高度,可能会有更好的解决方案。