두 개의 요소를 연결하여 응답 값을 유지하십시오.

Question

나는 간단한 부동산 웹 사이트를 만들고 현재 목록 페이지를 만들고 있습니다. 나는 here과 매우 비슷한 제품을 원합니다. skeleton framework을 사용하고 있기 때문에 코드에서 아이디어를 얻을 수 없습니다. 내 current progress and code 또는 그 이하입니다.

두 요소; 속성과 본문의 사진이 떨어져 있습니다 (중간에 틈이 있습니다).
또한 브라우저의 크기를 조정하면 목록이 세로 직사각형으로 렌더링되지 않습니다.

내 생 질문은 다음과 같습니다
1) 어떻게 이미지와 inbetween 공백이 없도록 본문 텍스트를 연결하려면?

2) 본문 텍스트가 사진 아래로 접힐 필요가있을 때 본문 텍스트와 이미지의 너비를 어떻게 설정합니까?

html로

<div class="five columns image"> 
    <a href="Properties/9-Walter-Street-Claremont/Walter-Street.html"><img src="Properties/9-Walter-Street-Claremont/Listing.jpg" alt="Listing"></a> 
</div> 
<div class="ten columns body-info"> 
    <h2><a href="Properties/9-Walter-Street-Claremont/Walter-Street.html">Walter Street <span>$2500/wk</span></a></h2> 
    <h3>Claremont, 6010</h3> 
    <p>Lorem Ipsum</p> 
    <div class="info"> 
    <ul> 
     <li><img src="img/bedrooms.png"> 5</li> 
     <li><img src="img/bathrooms.png"> 3</li> 
    </ul> 
    </div> 
</div> 

CSS는 (브라우저 또는 장치의 크기를 변경하는 경우)

.body-info { 
    background-color: #fff; 
    height: 200px; 
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1); 
    -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1); 
    box-shadow: 0px 1px 1px rgba(0,0,0,0.1); 
    margin-bottom: 30px; 
    padding: 0px; 
} 
.image a img:hover { 
background-color: rgba(0,0,0,0.5); 
background-image: url("img/eye.png"); 
background-position: center center; 
background-repeat: no-repeat; 
} 
.body-info h2 a { 
    transition: color 0.2s ease-in; 
    -webkit-transition: color 0.2s ease-in; 
    color: #428f9c; 
    font-size: 23px; 
    font-weight: normal; 
} 
.image { 
    width: 270px; 
    float: left; 
} 
.body-info { 
    margin-left: 280px; 
} 
.body-info h2 a:hover { 
    color: #0b7587; 
} 
.body-info span { 
    margin-right: 15px; 
    color: #444; 
} 
.body-info p { 
    color: #777; 
    font-size: 16px; 
} 
.body-info ul { 
    list-style: none; 
} 
.body-info ul li { 
    color: #777; 
} 

사전에 감사합니다!

Answer 1

약간의 도움을 받으려면 CSS에서 @media을 사용할 수 있습니다.

예를 들어 화면이 특정 너비보다 작을 때 스타일을 변경할 수 있습니다.

HTML :

<div class="wrap"> 
    <div class="image">img</div> 
    <div class="info">info</div> 
</div> 

CSS :.

.wrap { 
    background: gray; 
    min-height: 200px; 
    padding: 10px; 
} 
.image { 
    width: 270px; 
    height: 180px; 
    background: lightgray; 
    display: inline-block; 
} 
.info { 
    background: lightsteelblue; 
    display: inline-block; 
} 
@media only screen and (max-width:600px){ 
    .image, .info { 
     width: 100%; 
     display: block; 
    } 
} 

그래서 당신이 .image 서로 옆에 .info 표시하는 전체 화면이있을 때 (display: inline-block;를 사용하여 스타일입니다 무엇을 화면 크기가 조정되고 600px보다 작 으면 div 속성에 따라 디스플레이 속성이 block으로 변경되어 서로 아래에 표시됩니다.

게시물의 예를 참조하면

JSFiddle DEMO

, 당신이해야 할 유일한 것은 만들거나 화면이 작아 질 때 이미지 크기를 조정하는 스크립트를 찾을 수 있습니다.

희망이 도움이됩니다.