배경 (왼쪽 및 오른쪽) 간단히

Question

:

http://d.pr/i/EMwo.jpg

이 나는 ​​가능한 한 깨끗한 방법을 달성하고 싶은 것입니다. 여기에서 Inuit.css을 사용하고 있습니다.

꽤 간단해야하지만 패딩은 더욱 복잡합니다.

는 (나는 여기에 마크 업을 추가 할 관련라고 생각하지 않았다.)

편집 :

내가 잘못했다. 여기 :

<div class="content content--work"> 
    <div class="container--bigger"> 
    <div class="grid"> 
     <div class="grid__item one-half"> 
     <div class="work-main"> 
      <img src="img/work/timburton-1.svg" alt=""> 
     </div> 
     </div> 
     <div class="grid__item one-half"> 
     <div class="challenge"> 
      <h3 class="work-title">The challenge</h3> 
      I needed to create a strong system.<br> 
      Something that would be good enough to generate 7 posters. 
     </div> 
    </div> 
    </div> 
</div><!-- container bigger --> 

절반

컨테이너 크기의 절반을 차지 인라인 블록이다. 배수로는 패딩으로 만들어집니다. (경계 박스)

grid__item { 
    display: inline-block; 
    padding-left: 30px; 
} 

one-half { 
    width: 50%; 
} 

* 편집 2 : * 내가 this 함께했다

. 잘 작동하지 않습니다.

우리가 창 크기를 조정하면 그라디언트 사이의 경계가 교차 지점에 없습니다. 또한, 나는 그라디언트로 그것을 만들려고했는데, 내 생각에 잘 작동하지 않습니다. (고정 폭 대 %)이 여기에

는 CSS입니다 : (동일한 HTML) : 무엇보다

.challenge 
    background: #f4f0e5 
    padding-top: 20px 
    padding-bottom: 30px 
    vertical-align: top 
    padding: 20px 
    box-shadow: inset 5px 0 0 #9b9797 
    margin-bottom: 20px 

.content--work 
    background: #423c3f 
    padding-top: 0 
    padding-bottom: 0 
    background: #423c3f /* Old browsers */ 
    background: -moz-linear-gradient(left, #423c3f 0%, #423c3f 50%, #f7f5ea 50%, #f7f5ea 100%) /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#423c3f), color-stop(51.1%,#423c3f), color-stop(51.1%,#f7f5ea), color-stop(100%,#f7f5ea)) /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, #423c3f 0%,#423c3f 50%,#f7f5ea 50%,#f7f5ea 100%) /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, #423c3f 0%,#423c3f 50%,#f7f5ea 50%,#f7f5ea 100%) /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, #423c3f 0%,#423c3f 50%,#f7f5ea 50%,#f7f5ea 100%) /* IE10+ */ 
    background: linear-gradient(to right, #423c3f 0%,#423c3f 50%,#f7f5ea 50%,#f7f5ea 100%) /* W3C */ 

    .container--bigger 
     padding-top: 20px 
     background: image-url("work-separation.png") repeat-y 51.5% 60% 

• , 그것은 다른 내가

Answer 1

를 사용하고 브라우저에 따라 행위 이상한 것은 마크 업을 추가하는 것과 관련이 없다고 생각할 것입니다. 그 밖의 무엇이 관련 될 수 있습니까?

어쨌든 가능한 해결책을 설정했습니다.

<div id='left'> 
    <img src='...' /> 
</div> 
<div id='right'> 
    <div id="right-content"> 
     <p>Lorem ipsum</p> 
    </div> 
</div> 

참고 오른쪽 열에 내부 추가 DIV, 우리는 당신이 문제가있는 패딩에 필요한 :

내 태그는 다음과 같이 보일 것이다. 몸에 간단한 그라디언트를 사용하면 두 가지 톤 배경을 얻을 수 있습니다. 그렇지 않으면 동일한 높이가 아닌 열을 처리합니다. 내 CSS는 다음과 같이 보일 것입니다 :

body, html { 
    height: 100%; 
} 
body { 
    background: linear-gradient(to right, #753517 50%, #eae7c9 50%); 
} 
#left, #right { 
    float: left; 
    width: 50%; 
} 
#left img { 
    float: right; 
} 
#right-content { 
    padding: 0 30px; 
} 

정직해야하지만, 설명해 줄 것을 요청하십시오. 그라디언트 코드에 접두어를 추가하여 '모든'브라우저에서 작동되게하는 것을 잊지 마십시오. 당신은 이누이트을 사용하는 경우 http://jsfiddle.net/Pevara/G2Nzr/

Answer 2

:

이 한 번 봐 가지고 작업 예제를 참조하십시오.CSS를, 그들은 정확히이 목적을 위해 내장 된 그리드 시스템이 있습니다. 소스 코드 here을 볼 수 있습니다.

기본적으로 grid__item의 조합을 지정된 너비와 함께 사용하려고합니다. 귀하의 경우에는, 마크 업은 다음과 같이 될 것이다 :이 사이에 (내가 생각)의 시궁창으로 서로 옆에 16px를 두 반쪽을 만듭니다

<div class="grid"> 
    <div class="grid__item one-half"> 
     left half 
    </div> 
    <div class="grid__item one-half"> 
     right half 
    </div> 
</div> 

. 이 시궁창을 설명하고 clearfix를 설명하기 위해 부모 div로 grid로 묶어야합니다. 당신은 당신의 프로젝트에 더 반보다 더 많은 필요를 발견하면

, 동일한 시스템은 당신이 background-clip 및 box-sizing을 다할 것 등 분, 사분, 다섯째,

Answer 3

사용할 수 있습니다. 이처럼 :

<div class="grid"> 
    <div class="grid__item one-half"> 
     left half 
    </div> 
    <div class="grid__item one-half"> 
     right half 
    </div> 
</div> 

CSS 코드 : 당신은 예를 들어, 브라우저 접두사를 추가 할 필요가

*{ 
    box-sizing: border-box; 
} 
.grid > div { 
    width: 50%; 
    float: left; 
    background: green; 
} 
.grid > div:nth-child(2){ 
    padding-left: 30px; 
    background: red; 
    background-clip: content-box; 
} 

: -moz -/- 웹킷 -/- 오 -/- MS-배경 - 위해 클립 및 상자 크기 조정. Demo을 확인하십시오.

그리고이 시도됩니다

<div class="grid"> 
    <div>left</div> 
    <div>right</div> 
</div> 

CSS 코드를 :

*{ 
    box-sizing: border-box; 
} 
.grid > div{ 
    background: green; 
    width: 50%; 
    float: left; 
} 
.grid div:nth-child(2){ 
    border-left: 30px solid transparent; 
    padding: 0 10px; 
    background-color: orange; 
    background-clip: padding-box; 

} 

가 demo을 참조하시기 바랍니다. 그리고 당신이처럼 CSS3 calc() 기능을 다할 것입니다 :

.grid > div{ 
    background: green; 
    float: left; 
    width: 50%; 
} 
.grid > div:nth-child(2){ 
    background: orange; 
    float: right; 
    width: -moz-calc(50% - 30px); 
    width: -webkit-calc(50% - 30px); 
    width: -o-calc(50% - 30px); 
    width: -ms-calc(50% - 30px); 
    width: calc(50% - 30px); 
} 

가 demo을 참조하시기 바랍니다.

마지막으로 방법이 있습니다. flexbox module을 사용합니다.

<div class="grid"> 
    <div>left</div> 
    <div>right</div> 
</div> 

CSS 코드 :이처럼

.grid { 
    display: -moz-box; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
} 
.grid > div { 
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    -ms-flex: 1; 
    -webkit-flex: 1; 
    flex:1; 
    width: 50%; 
    background: green; 
} 
.grid > div:nth-child(2){ 
    margin-left: 30px; 
    background: red; 
} 

demo을 참조하시기 바랍니다.