Question

我无法正确设置两个图形边框，左边框和右边框。它包含在一个正文中以及一个文本区域。我的目标是＆＃34;三明治＆＃34;这按以下顺序排列：左边框gfx，文本区域，右边框gfx。但是我遇到了两个问题。左边框没有拉伸以匹配我的文本区域的可变高度，右边框正在从看起来像body div或text div的位置下降。

HTML：

<div id="wrapper">
    <div id="header">
        header

        <div id="logo"></div>

        <div id="title&quot;"></div>

        <div id="login"></div>
    </div><!--END HEADER-->

    <div id="menu">
        menu
    </div>

    <div id="body">
        <div id="shadeL">
            <!--not formatting height properly-->
            &nbsp;
        </div>

        <div id="text">
            Body Contentadsfasdf
        </div>

        <div id="shadeR">
            <!--stepping down off from body or text div-->
            &nbsp;
        </div>
    </div><!--END BODY-->

    <div id="footer">
        footer - 2015
    </div>
</div><!--END WRAPPER-->

CSS：

#wrapper {}

#shadeL {
    background-image:url(../ILshadow.jpg);
    width:22px;
    height:inherit;
    display:inline;
    background-repeat:repeat-y
}

#shadeR {
    clear:right;
    float:right;
    background-image:url(../IRshadow.jpg);
    width:22px;
    background-repeat:repeat-y
}

#header {
    background-image:url(../header.jpg);
    width:1024px;
    height:56px
}

#menu {
    background-image:url(../menu.jpg);
    width:1024px;
    height:31px
}

#body {
    background-color:#e0e0e0;
    width:1024px;
    display:block;
    margin-left:8px
}

#text {
    display:inline;
    width:700px;
    margin-left:40px
}

#footer {
    background-image:url(../footer.jpg);
    width:1024px;
    height:39px
}

*编辑： https://jsfiddle.net/hnftp346/ 对不起，这里的人是jsfiddle，虽然我仍在试图弄清楚如何将gfx上传到网站

Answer 1

如果我没有弄错你正在寻找类似的东西，不是吗？

JSFiddle

.row {
  display: table;
}
[class*="col-"] {
  float: none;
  display: table-cell;
  vertical-align: top;
}
.header {
  background-color: yellow;
}
.left {
  background-color: blue;
}
.right {
  background-color: red;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class='container'>
  <div class='row'>
    <div class='col-sm-12 header'>Header</div>
  </div>
  <div class='row'>
    <div class='col-xs-1 left'></div>
    <div class='col-xs-10'>This is my main content
      <br/>
      <br/>
      <br/>t t t</div>
    <div class='col-xs-1 right'></div>
  </div>
</div>

Answer 2

尝试设置所有元素的width并开始使用float。

JSFiddle

background-color已设置，因为我不知道你的图形是什么网址。

您可以将其删除。

CSS内联图像边框不断下降

2 个答案: