두 열 레이아웃을 수정하려고 시도했습니다.

-1

그래서 W3 학교에서 다음 두 가지 열 레이아웃을 사용했는데, 이는 내가 코딩하고있는 코드에서 작동합니다. 다음과 같이 코드는 다음과 같습니다두 열 레이아웃을 수정하려고 시도했습니다.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
    * { 
 
     box-sizing: border-box; 
 
    } 
 
    body { 
 
     margin: 0; 
 
    } 
 
    /* Create two equal columns that floats next to each other */ 
 
    .column { 
 
     float: left; 
 
     width: 50%; 
 
     padding: 10px; 
 
     height: 300px; /* Should be removed. Only for demonstration */ 
 
    } 
 
    /* Clear floats after the columns */ 
 
    .row:after { 
 
     content: ""; 
 
     display: table; 
 
     clear: both; 
 
    } 
 
    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ 
 
    @media (max-width: 600px) { 
 
     .column { 
 
      width: 100%; 
 
     } 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 
    <h2>Responsive Two Column Layout</h2> 
 
    <p>Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).</p> 
 

 
    <div class="row"> 
 
    <div class="column" style="background-color:#aaa;"> 
 
     <h2>Column 1</h2> 
 
     <p>Some text..</p> 
 
    </div> 
 
    <div class="column" style="background-color:#bbb;"> 
 
     <h2>Column 2</h2> 
 
     <p>Some text..</p> 
 
    </div> 
 
    </div> 
 

 
</body> 
 
</html>

을 그리고 내가 필요한 작동, 유일한 것은 내가 열 이외의 텍스트를 가지고 각각의 아래를 중심으로 텍스트 블록을 가질 필요가 있다는 것입니다 열 있도록 다음과 같은 :

또한

이 때 변경 수 있도록, 내가 하나 개의 배경 이미지 및 호버에 별도의 이미지를 가지고 디자인을 필요로하는 커서가 위로 이동합니다.

도움을 주시면 매우 감사하겠습니다.

출처

2017-10-31 Manu Alv

? 기둥에 뭐가 있니? 이미지가 있습니까? 설정해야 할 높이가 있습니까? 당신은 명확히 할 수 있습니까? 실제로 코드가 잘 작동합니다 ... 텍스트가 외부에 있어야한다면 html로도 외부에 있어야합니다! –

글쎄, 칼럼에는 이미지가있을 것입니다, 저는 이것을 예제로 사용하고 있습니다. 이미지로 시작하기 전에 필자는 컬럼 밖에서 텍스트를 가져 가고 싶지만 응답 성을 저해하지 않으면이를 수행 할 수 없다. –

이게 뭔가요? https://codepen.io/gc-nomade/pen/vWOvWb 이미지는 패딩 (고정 값 또는 %/vh/vw/vmin 또는 vmax 단위) 또는 html 자체 내부의 이미지 세트를 통해 백그라운드 및 거실에서 설정할 수 있습니다. 같은 heigts의 col을 그리려면 display : table & CIE/flex 또는 grid를 사용해야합니다. float, inline-x는 나란히 놓을 수 없습니다. –

이 시도 :

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
.bigCol { 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
.column { 
 
    padding: 10px; 
 
    height: 300px; 
 
} 
 

 
.row { 
 
    border: 1px solid #CCC; 
 
    text-align: center; 
 
} 
 

 
.row:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
@media (max-width: 600px) { 
 
    .bigCol { 
 
     width: 100%; 
 
    } 
 
}

<h2>Responsive Two Column Layout</h2> 
 
<p>Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).</p> 
 

 
<div class="row"> 
 
    <div class="bigCol "> 
 
     <div class="column" style="background-color:#aaa;"></div> 
 
     <div class="txt"><h2>Column 1</h2><p>Some text..</p></div> 
 
    </div> 
 
    <div class="bigCol "> 
 
     <div class="column" style="background-color:#bbb;"></div> 
 
     <div class="txt"><h2>Column 2</h2><p>Some text..</p></div> 
 
    </div> 
 
</div>

출처

2017-11-01 03:36:35 Ehsan

두 열 레이아웃을 수정하려고 시도했습니다.

답변

관련 문제