CSS/부트 스트랩 div 레이아웃 문제

-1

div 내에 일부 요소를 배치하려고합니다.CSS/부트 스트랩 div 레이아웃 문제

(클릭 빨간색 아이콘에) 당신은 내가 Bootply 링크에서 시도한 것들 중 일부를 볼 수 있습니다. 일반적으로이 상황에서 이미지와 텍스트 요소를 분리 된 Div로 분할하고 display:inline-block으로 설정하려고합니다.

모든 Div에 적용되는 기본 스타일링이있는 부트 스트랩을 사용하고 있기 때문에 이것은 작동하지 않는 것 같습니다. 또는 CSS에서 아마추어 순위이기 때문에 작동하지 않을 수도 있습니다.

출처

2014-05-19 d.abyss

당신은

Bootstrap fiddle 그냥 추가 내 솔루션을 확인할 수 있습니다 클래스 부트 스트랩의 이미지에 의해 풀은 왼쪽과 .notification_msg에서 CSS를 변경했습니다.

<img class="notification_img pull-left" src="http://placehold.it/60x60">

.notification_msg { padding-bottom: 30px; border-bottom: 1px solid #D3D3D3; }.

출처

2014-05-19 11:50:13 SP7

코드를 입력하고 링크를 제공하는 대신 대답으로 설명하십시오. –

이 솔루션을 사용하면 텍스트가 위쪽으로 세로로 정렬되고 텍스트와 이미지 사이에 간격이 없습니다. 이 문제를 해결할 수있는 유일한 방법은 Div의 텍스트 요소를 래핑하고 'vertical-align : center'및 'margin-left : 3px'클래스를 지정하는 것입니다. 이것이 당신의 솔루션으로 가능할 수있는 방법이 있습니까? 이것이 Divs를 사용하여이 스타일을 만드는 나의 원래 문제와 관련이 있기 때문에 묻습니다. –

일반적으로 경계선보다 div 및

을 사용하여 처리하기가 쉽기 때문에 일반적으로 코드 구조가 완전히 변경됩니다. 그러나'.notification_img'에'margin-right : 3px'를 추가하여 간격을 해결할 수 있습니다. 수직 정렬의 경우 div 위에 해결해야합니다. – SP7

CSS/부트 스트랩 div 레이아웃 문제

답변

관련 문제