我有一个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>
答案 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;
}
答案 2 :(得分:0)
你走了:
a {
display: inline;
background-color: #dddddd;
}
a+a:before {
content:"\a";
white-space: pre;
}
我想补充一点,如果div内有内容,或者你的div有最小高度,可能会有更好的解决方案。