如何制作三个边框？

Question

抱歉，如果我的问题听起来非常愚蠢，我正在尝试学习asp.net。

无论如何，我的问题是，如何制作三个边框，如下：

因为您可以看到边框位于非常左/右，徽标（图像）位于中心 网站的其余部分没有边框，没有任何边框。只是正常的HTML。

我设法通过查看w3schools的例子做了一些边框，比如我给出的图片，但是我不确定我是否做对了，当我做最后一个边框（右边的那个）似乎是在徽标之后而不是粘贴在网页的最右边。

Answer 1

Absolutely position左侧和右侧的方框，然后在中间区域设置与侧箱宽度相匹配的左右边距。例如：

<div class="header">
    <div class="left">
        <img src="http://placekitten.com/50/50">
    </div>
    <div class="middle">Pancakes</div>
    <div class="right">
        <img src="http://placekitten.com/50/50">
    </div>
</div>

CSS：

.header {
    position: relative; /* Needed for the position:absolute to work properly */
}
.left {
    position: absolute;
    border: 1px solid red;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
}
.middle {
    text-align: center;
    margin: 0 50px;
}    
.right {
    position: absolute;
    border: 1px solid red;
    width: 50px;
    height: 50px;
    top: 0;
    right: 0;
}

实时版本：http://jsfiddle.net/ambiguous/TNzn9/

另外，请远离w3schools，他们will lead you astray。

Answer 2

    <div style="float:left;border:3px solid black;width:50px;height:50px;"></div>
    <div style="float:left;"><h1>LOGO</h1></div>
    <div style="float:left;border:3px solid black;width:50px;height:50px;"></div>
  <div style="clear:both"> 
The REST
</div>