div 문제가있는 HTML 및 CSS

-3

초보자 인 CSS & HTML입니다. 아직 배우고 있습니다.div 문제가있는 HTML 및 CSS

나는이 결과를 얻고 싶은

사람이 내 문제를 해결하기 위해 나를 도울 수 있습니까?

body { 
 
    background: black; 
 
} 
 

 
.process { 
 
    background-color: rgba(255, 255, 255, 0.15); 
 
    height: 255px; 
 
    width: 630px; 
 
} 
 

 
.process img { 
 
    text-align: center; 
 
    display: block; 
 
    padding-top: 40px; 
 
    padding-bottom: 33px; 
 
} 
 

 
.lockup { 
 
    text-align: center; 
 
} 
 

 
.lockup h2 { 
 
    color: #5db442; 
 
    font-size: 26px; 
 
    font-weight: 100; 
 
    text-transform: uppercase; 
 
} 
 

 
.sign { 
 
    
 
} 
 

 
.fill { 
 
    
 
    
 
} 
 

 
.fill p { 
 
    color: white; 
 
}

<div class="process"> 
 
       
 
       <img src="http://s33.postimg.org/m5kmwz9ov/upanddown.png"/> 
 
       
 
       <div class="lockup"> 
 
       
 
        <div class="sign"> 
 
        <img src="http://s33.postimg.org/h2h988fdb/signup.png" /> 
 
        </div> 
 
        
 
        <div class="fill"> 
 
         <h2>Signup Process</h2> 
 

 
        <p>1. User enters email address</p> 
 
         <p> 2. Clicks on "Sign up for free"</p> 
 
        </div> 
 
        
 
       </div> 
 
       
 
      </div>

감사 도와주세요 :

여기 내 코드입니다.

출처

2016-06-09 Ryan Riel

, 당신의 CSS이입니다? – Murali

@ Ryan 당신이 초심자 인 경우에도 솔루션을 제공하기 위해 SO에 게시하는 것이 아니라 스스로 해결하려고해서는 안된다는 의미는 아닙니다. –

muhammad 나는 이미 10 번 이상 시도했지만 여전히 해결책을 얻을 수 없다. 그래서 나는 이것을 이미 게시했다. –

다음 jsFiddle을 살펴 보시기 바랍니다. 나는 그것이 당신을 위해 일하기를 바랍니다. 나는이 당신을 도움이되기를 바랍니다 https://jsfiddle.net/hmxbes8u/2/

: 여기 jsFiddle Link

<div class="process"> <img src="http://s33.postimg.org/m5kmwz9ov/upanddown.png"/> 
    <div class="lockup"> 
    <div class="sign"> <img src="http://s33.postimg.org/h2h988fdb/signup.png" /> </div> 
    <div class="fill"> 
     <h2>Signup Process</h2> 
     <p>1. User enters email address</p> 
     <p> 2. Clicks on "Sign up for free"</p> 
    </div> 
    </div> 
</div> 

<style> 
body { 
    background: black; 
} 
.process { 
    background-color: rgba(255, 255, 255, 0.15); 
    height: 255px; 
    width: 630px; 
    margin-left: auto; 
    margin-right: auto; 
} 
.process img { 
    /*text-align: center; 
    display: block;*/ 
    padding-top: 40px; 
    padding-bottom: 33px; 
} 
.lockup { 
    text-align: center; 
} 
.lockup h2 { 
    color: #5db442; 
    font-size: 26px; 
    font-weight: 100; 
    text-transform: uppercase; 
} 
.sign { 
    float: left; 
    width: 43%; 
    text-align: right; 
} 
.fill { 
    float: left; 
    text-align: left; 
    padding-left: 4%; 
} 
.fill p { 
    color: white; 
} 
</style>

출처

2016-06-09 05:31:53 TechYogi

감사합니다. 하지만 질문에 너비와 패딩의 사용 비율이 왜 중요한가요? –

백분율은 미디어 쿼리를 처리하도록 설정 한 후 어느 시점에서 응답하도록하려는 경우에 도움이됩니다. 같은 방법으로 PX를 제공 할 수 있지만 그렇게 할 수는 있습니다. :) 모두가 작업/코딩의 스타일을 가지고 있습니다. 도움이 되길 바랍니다. – TechYogi

코드 아래 봐 또는 jsfiddle 링크입니다.

HTML

<div class="process"> 

       <img src="http://s33.postimg.org/m5kmwz9ov/upanddown.png"/> 

       <div class="lockup"> 

        <div class="sign"> 
        <img src="http://s33.postimg.org/h2h988fdb/signup.png" /> 
        </div> 

        <div class="fill"> 
         <h2>Signup Process</h2> 

        <p>1. User enters email address</p> 
         <p> 2. Clicks on "Sign up for free"</p> 
        </div> 

       </div> 

      </div>

CSS :

당신이 시도 무엇

body { 
    background: black; 
} 

.process { 
    background-color: rgba(255, 255, 255, 0.15); 
    height: 255px; 
    width: 630px; 
    position:relative; 
    text-align: center; 
} 

.process > img { 
    text-align: center; 
    display: inline-block; 
    padding-top: 40px; 
    padding-bottom: 33px; 
} 

.lockup { 
    text-align: center; 
    position:absolute; 
    top:100px; 
    right:0; 
    left:0; 

} 

.lockup h2 { 
    color: #5db442; 
    font-size: 26px; 
    font-weight: 100; 
    text-transform: uppercase; 
    margin-top:0; 
} 

.sign { 
    display:inline-block; 
    vertical-align:top; 
    margin-right:30px; 
} 

.fill { 
    display:inline-block; 
    text-align:left; 

} 

.fill p { 
    color: white; 
}

출처

2016-06-09 05:37:16

div 문제가있는 HTML 및 CSS

답변

관련 문제