Question

在响应式设计网站中，我需要显示并排显示的四个链接，并将这4个链接的集合包含在自调整边框内。如果所有四个链接都不能全部水平放置在一条线上而不会相互覆盖，则那些不适合的链接应该下拉到后续行，并且边界框的大小应该增加。

我的主要问题是边界框...不包围链接或正确调整大小。我做错了什么？

以下是我尝试过的代码和CSS：http://jsfiddle.net/K3jyD/

HTML ：

<div class="boundingbox">
    <div class="boundeditem">
        <div style="text-align: center;"><a title="Link Number One" href="http://www.abc.com/1/"><span><strong>NUMBER ONE</strong></span></a>
        </div>
    </div>
    <div class="boundeditem">
        <div><a title="Link Number Two" href="http://www.abc.com/2/"><span><strong>NUMBER TWO</strong></span></a>
        </div>
    </div>
    <div class="boundeditem">
        <div><a title="Link Number Three" href="http://www.abc.com/3/"><span><strong>NUMBER THREE</strong></span></a>
        </div>
    </div>
    <div class="boundeditem">
        <div style="text-align: center;"><a title="Link Number Four" href="http://www.abc.com/4/"><span><strong>NUMBER FOUR</strong></span></a>
        </div>
    </div>
</div>

CSS ：

.boundingbox {
    border: 1px solid red;
    padding:10px;
    margin:10px;
    clear:both;
}

.boundeditem {
    width:25%;
    min-width:25%;
    max-width:25%;
    float:left;
    padding:10px;
}

.boundeditem div {
    text-align: center;
}

.boundeditem a {
    text-decoration: underline;
}

我不允许在这个项目中使用除了普通的旧html和css之外的jquery或外部javascript库。

Answer 1

将此添加到.boundingbox

.boundingbox {
position: absolute;
height: auto;
}

不确定这是否正是您正在寻找的。

Answer 2

float:left将您的链接带到边界框之外。试试这个：

.boundeditem {
    width:25%;
    min-width:25%;
    max-width:25%;
    display: inline-block;
    padding:10px;
}

如果您希望四个链接彼此相邻而不是三个，请将宽度略小于25％，并将填充放在div in boundeditem中，而不是boundeditem本身。

.boundeditem {
    width:24%;
    min-width:24%;
    max-width:24%;
    display: inline-block;
}
.boundeditem div {
    text-align: center;
    padding: 10px;
}

如何使用CSS环绕与边界框的链接

2 个答案: