0

ご覧のとおり、最初の (黄色で囲まれた) div と 2 番目 (赤い輪郭で囲まれた) div の間にギャップがあります。私はいくつかのことを試しましたが、今のところ何もうまくいきません。 

#borderLeft{

    background: url(../01_templates/borderLeft.png) left no-repeat;
    display:inline;
    position relative;
    left:50px;
    float:left;
    width:133px;
    border:1px dotted yellow;

}

#border{

    background: url(../01_templates/borderCenter.png) left repeat-x;
    display:inline;
    position:inherit;
    width:100%;
    border:1px dotted red;
    margin-right:116px;

}

#borderRight{

    background: url(../01_templates/borderRight.png) left no-repeat;
    display:inline;
    float:right;
    position:absolute;
    right:0px;
    border:1px dotted yellow;
    width:133px;

}


<div id="borderLeft"></div>
<div id="border"></div>
<div id="borderRight"></div>
4

2 に答える 2

4

font-size: 0OPの元の問題は、 sを設定することで修正できますdiv。

以下はflexboxに基づく最新のアプローチです。

.parent {
  display: flex;
}

.parent div {
  border: 1px solid black;
  width: 25%;
}

.parent .double {
  border-color: red;
  flex-grow: 2;
}
<div class="parent">
  <div></div>
  <div class="double"></div>
  <div></div>
</div>

于 2012-11-26T14:47:15.273 に答える