CSS3에서요 border에 관해서 여쭤볼게 있어서요... 채택완료

쥬노

9년 전 조회 4,205

제가 위 그림처럼 <div>에서 row를 잡고 만들고 싶은데요...

제가 코딩한거는 아래와 같습니다.

<div class="container">
<div class="row">
   <div class="col-md-3" style="border-bottom:solid 1px; border-bottom-color:#3f51b5; margin-top:102px">
   </div>
   <div class="col-md-6" style="text-align:center; border-bottom:solid 3px; border-bottom-color:#3f51b5; margin-top:30px;">
     <h4>Title text</h2>
     <p>subject title</p>
   </div>
   <div class="col-md-3" style="border-bottom:solid 1px; border-bottom-color:#3f51b5; margin-top:102px">
   </div>
</div>
</div>

이렇게 했는데요...

문제는 아래그림처럼 반응형으로 화면을 줄였을때 선이 이상하게 나오는 문제때문에요...

이거를 어떻게 해야하는건지 고수님들께 여쭤보고 싶습니다.

#부트스트랩 #css #html5 #border

답변 4개

정렬:

채택된 답변

+20 포인트

nanati

프로필 보기 이 회원 글보기 이 회원의 댓글보기

9년 전

먼저, h4을 h2로 닫으면 안되는 건 아실 것 같은데 실수이신거죠?

반응형으로 하고 싶으셔서 row 등으로 나누시는 건 알겠는데

단지 위 이미지를 만들려고 div를 나누신거라면,

불필요한 div가 많다고 생각이 되네요 (부트스트랩 같은 걸 쓰시는 거면 어쩔 수 없지만...)

border-bottom으로 넣으시려면 h4(또는 h2)에 넣으시면 되고,

서브타이틀을 span으로 넣으셔서

display:block; 으로 하시면 될 것 같습니다.

아래와 같이 작성해 보았습니다.

Copy

<style>.container {	text-align: center;}.container h2 {	border-bottom: 1px solid #3f51b5;}.container h2 span {	display: block;	width: 360px;	margin: 0 auto;	font-size: 14px;	font-weight: normal;	padding: 5px 0;	border-bottom: 2px solid #3f51b5;}</style> <div class="container">  <h2> Title text<span>subject title</span></h2></div>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.