Вставьте строку внизу 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:

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

Еще один простой способ сделать это с помощью CSS :after:

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

<div></div>

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>

Pen here