CSS는 표 셀 및 상대 폭

Question

은 내가 CSS 문제와 사투를 벌인거야 내가 어떤 도움을 기대했다.
내가 헤더를 디자인 해요 :

여기에 이야기입니다. 두 개의 사업부로 나뉘어져 있습니다. 첫 번째 것은 70 % 너비이고 두 번째 것은 30 % 너비 여야합니다. 나는 그들을 나란히 놓기 위해 CSS 속성 "Display : table-cell"을 사용했다.

div.chapo { 
width: 70%; 
display: table-cell; 
} 

div.img_header { 
width: 30%; 
display: table-cell; 
background-position: center center; 
background-repeat: no-repeat; 
background-size: cover; 
-webkit-background-size: cover; 
background-image: url(...); 
} 

최초의 사업부에 배치 텍스트가 충분히 긴 경우 그것은 잘 작동하고

:

Buuuut ... 텍스트가 짧은 경우, 그것은 지저분한 모든 것 :

내 폭 값이 특정한 경우에 보관하지 않는 이유

나는 알아낼 수 없습니다. 친절하게도 나를 도와 것 모든 사람에 미리
감사합니다 ... 여기

는 바이올린 링크입니다 : https://jsfiddle.net/vinny38/verucw8p/3/

Answer 1

나는 .test-wrap 클래스에 모두 DIV ce_text chapo 및 img_header 포장 및 CSS를 아래에 제공 :

.test-wrap { 
display: table; 
width: 100%; 
} 

body, 
 
div { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: 'Roboto condensed', sans-serif; 
 
} 
 

 
div.inside { 
 
    position: relative; 
 
} 
 

 
div.chapo { 
 
    background-color: #ef4056; 
 
    background-image: none; 
 
    width: 70%; 
 
    height: 255px; 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    background-color: #aaa; 
 
    color: #fff; 
 
    padding: 20px 8%; 
 
    position: relative; 
 
} 
 

 
h1 { 
 
    margin-top: 0; 
 
    font: 1.4em 'Oswald', Helvetica, sans-serif; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
} 
 

 
div.chapo p { 
 
    width: 100%; 
 
    min-width: 100%; 
 
    position: relative; 
 
    padding: 0; 
 
    font-size: 1em; 
 
    font-weight: 300; 
 
} 
 

 
div.img_header { 
 
    width: 30%; 
 
    position: relative; 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    -webkit-background-size: cover; 
 
    background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-73.jpg); 
 
} 
 

 
div.mod_breadcrumb { 
 
    height: 40px; 
 
    margin: 0; 
 
    padding-top: 5px; 
 
    padding-right: 30px; 
 
    padding-bottom: 5px; 
 
    background-color: #e3e3e3; 
 
    padding-left: 8%; 
 
} 
 

 
.mod_breadcrumb ul li { 
 
    height: 30px; 
 
    display: inline-block; 
 
    padding: 3px 0; 
 
    color: #828282; 
 
} 
 
.test-wrap { 
 
    display: table; 
 
    width: 100%; 
 
}

<div class="inside"> 
 
    <div class="test-wrap"> 
 
    <div class="ce_text chapo"> 
 
     <h1>My header</h1> 
 
     <div class='text-chapo'> 
 
     <p>Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipiscing </p> 
 
     </div> 
 
    </div> 
 
    <div class="img_header"></div> 
 
    </div> 
 
    <div class="mod_breadcrumb block"> 
 
    <ul> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

이 CSS는 ... OK (확인)의 '플로트 : 왼쪽'옵션을 선택하고 있습니다 상대 폭 다른. 여기서는 총 너비의 왼쪽과 오른쪽 패딩을 제거합니다. 플로트는 수평 정렬에 필요합니다.

body, 
div { 
    margin: 0; 
    padding: 0; 
    font-family: 'Roboto condensed', sans-serif; 

} 

div.inside { 
    position: relative; 
} 

div.chapo { 
     background-image: none; 
    width: 50%; 
    height: 255px; 
    vertical-align: top; 
    background-color: #aaa; 
    color: #fff; 
    padding: 20px 10%; 
    position: relative; 
    float: left; 

} 

h1 { 
    margin-top: 0; 
    font: 1.4em 'Oswald', Helvetica, sans-serif; 
    font-weight: bold; 
    text-transform: uppercase; 
} 

div.chapo p { 
    width: 100%; 
    position: relative; 
    padding: 0; 
    font-size: 1em; 
    font-weight: 300; 
} 

div.img_header { 
    width: 30%; 
    position: relative; 
    height: 295px; 
    vertical-align: top; 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    float: left; 
    -webkit-background-size: cover; 
    background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-73.jpg); 
} 

div.mod_breadcrumb { 
    height: 40px; 
    margin: 0; 
    padding-top: 5px; 
    padding-right: 2%; 
    padding-bottom: 5px; 
    background-color: #e3e3e3; 
    padding-left: 8%; 
    float:left; 
    width:90%; 
} 

.mod_breadcrumb ul li { 
    height: 30px; 
    display: inline-block; 
    padding: 3px 0; 
    color: #828282; 

} 

Answer 3

이 같은 시도 : 당신은 float를 정의해야 속성뿐만 아니라 정의해야합니다당신의 img_header 클래스 (당신은 255px로 높이를 준 다른 사업부에 대한 등) 5,142,917,273,210. 정말 필요합니다.

body, 
 
div { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: 'Roboto condensed', sans-serif; 
 
    box-sizing: border-box 
 
} 
 

 
div.inside { 
 
    position: relative; 
 
} 
 

 
div.chapo { 
 
    background-color: #ef4056; 
 
    background-image: none; 
 
    width: 70%; 
 
    float:left; 
 
    height: 255px; 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    background-color: #aaa; 
 
    color: #fff; 
 
    padding: 20px 8%; 
 
    position: relative; 
 
} 
 

 
h1 { 
 
    margin-top: 0; 
 
    font: 1.4em 'Oswald', Helvetica, sans-serif; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
} 
 

 
div.chapo p { 
 
    width: 100%; 
 
    min-width: 100%; 
 
    position: relative; 
 
    padding: 0; 
 
    font-size: 1em; 
 
    font-weight: 300; 
 
} 
 
.clearfix { 
 
    clear:both; 
 
} 
 
.img_header { 
 
    width: 30%; 
 
height: 255px; 
 
    float: right; 
 
    position: relative; 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    -webkit-background-size: cover; 
 
    background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-73.jpg); 
 
} 
 

 
div.mod_breadcrumb { 
 
    height: 40px; 
 
    margin: 0; 
 
    padding-top: 5px; 
 
    padding-right: 30px; 
 
    padding-bottom: 5px; 
 
    background-color: #e3e3e3; 
 
    padding-left: 8%; 
 
} 
 

 
.mod_breadcrumb ul li { 
 
    height: 30px; 
 
    display: inline-block; 
 
    padding: 3px 0; 
 
    color: #828282; 
 
}

<div class="inside"> 
 
    <div class="ce_text chapo"> 
 
    
 
    <div class='text-chapo'> 
 
    <h1>My header</h1> 
 
     <p>Lorem </p> 
 
     <p>Aliquam porttitor.</p> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="img_header"></div> 
 
    
 
    <div class="mod_breadcrumb block"> 
 
    <ul> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
<div class="clearfix"></div>