2015-10-09 2 views
1

У меня есть 2 divs, у которых есть только граничное дно, а div в середине, но нижняя часть div в середине не выстраивается в линию с 2 divs по какой-то причине. Как это исправить?Выстроив нижнюю часть divs

body { 
 
     font-size: 0; 
 
} 
 
#line1 { 
 
\t border-bottom: 1px solid black; 
 
\t display: inline-block; 
 
\t width: 25%; 
 
} 
 
#line2 { 
 
\t border-bottom: 1px solid black; 
 
\t display: inline-block; 
 
\t width: 25%; 
 
} 
 
#box { 
 
\t font-size: 18px; 
 
\t border: 1px solid red; 
 
\t display: inline-block; 
 
}
<div id = 'line1'></div> 
 
<div id = "box"> box </div> 
 
<div id = 'line2'></div>

ответ

3

Попробуйте

#line2 { 
border-bottom: 1px solid black; 
display: inline-block; 
vertical-align: bottom; 
width: 25%; 
} 

#line1 { 
border-bottom: 1px solid black; 
display: inline-block; 
vertical-align: bottom; 
width: 25%; 
} 
1

Вы можете использовать это свойство CSS стиль:

#line1, #line2, #box { 
    vertical-align: bottom; 
} 
0

для использования этого стиля:

<style> 
    body { 
     font-size: 0; 
    } 
    #line1 { 
     font-size: 18px; 
     border-bottom: 1px solid black; 
     display: inline-block; 
     width: 25%; 
    } 
    #line2 { 
     font-size: 18px; 
     border-bottom: 1px solid black; 
     display: inline-block; 
     width: 25%; 
    } 
    #box { 
     font-size: 18px; 
     border: 1px solid red; 
     display: inline-block; 
    } 
</style> 

для HTML добавить пространства в линии 1 & line2

<body> 
<div id = 'line1'>&nbsp;</div> 
<div id = "box"> box </div> 
<div id = 'line2'>&nbsp;</div> 
</body>