在div的底部插入一行

Question

我想在div的底部插入一行。

我的html文件：

<div style="position:relative">
    <div style="float:left;width:350px;height:360px;position:relative">
    <img style="position:absolute;left:0;" class="circular c_imgs" src="Edit.jpg"/>
    <img style="position:absolute;left:0;margin-top:175px" class="circular c_imgs" src="lessons.jpg"/>

        <img style="position:absolute;right:0;" class="circular c_imgs" src="makeup.jpg"/>
    <img style="position:absolute;right:0;margin-top:175px" class="circular c_imgs" src="fun.JPG"/>
    </div>


    <hr color="#337AB7" size="10" width="%100" style="position:absolute;bottom:0" >
</div>

我错了什么？

更新

我的css：

.bottomdiv:after{
content:'';
width:100%;
height:10px;
position:absolute;
bottom:0;
background:#337AB7;
border-radius:5px;
}

我的html文件：

<div class="remodal" data-remodal-id="modal">
<div class="bottomdiv" style="position:relative">
    <div style="float:left;width:350px;height:360px;position:relative">
    <img style="position:absolute;left:0;" class="circular c_imgs" src="../../../20100202-Cooking-090-Edit.jpg"/>
    <img style="position:absolute;left:0;margin-top:175px" class="circular c_imgs" src="../../../lessons.jpg"/>

        <img style="position:absolute;right:0;" class="circular c_imgs" src="../../../makeup.jpg"/>
    <img style="position:absolute;right:0;margin-top:175px" class="circular c_imgs" src="../../../fun.JPG"/>
    </div>

</div>

</div>

但是...

Answer 1

应该是100%而不是%100：

＆＃13;

＆＃13;

    <hr color="#337AB7" size="10" width="100%" style="position:absolute;bottom:0" >

＆＃13;

＆＃13;

＆＃13;

另一种简单的方法是使用CSS :after：

＆＃13;

＆＃13;

    div:after{
    content:'';
    width:100%;
    height:10px;
    position:absolute;
    bottom:0;
    left:0;
    background:#337AB7;
    border-radius:5px;
    }

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

为什么不尝试将所有图像包装在div .inner中 - 然后在其底部应用边框...通过稍微调整，您可以将图像相对地放置在网格中并添加clearfix inner，body { background: #999 } .modal { padding: 30px; max-width: 680px; margin: auto; background: white; border-radius: 4px; border: 1px solid #f1f1f1; box-shadow: 0 0 8px; } .inner { border-bottom: 4px solid blue; padding-bottom: 20px; } img{ width: 46%; margin: 2%; height: 200px; float: left; background: aliceblue; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }将清除它们，线条将从模态的底部出来。

<div class="modal">
  <div class="inner clearfix">
    <img class="circular c_imgs" src="Edit.jpg"/>
    <img class="circular c_imgs" src="lessons.jpg"/>
    <img class="circular c_imgs" src="makeup.jpg"/>
    <img class="circular c_imgs" src="fun.JPG"/>
  </div>
</div>

{{1}}

Pen here