CSS 및 디스플레이 : 인라인 블록

나는 약간의 어려움을 겪고있는 페이지가 있습니다. 아래 내용과 유사합니다. 가능하다면 .content div가 이미지의 오른쪽에 남아 있도록하려는 동작입니다. 페이지가 수평으로 축소되면 텍스트의 크기가 조정되지만 이미지의 오른쪽에 계속 표시됩니다.CSS 및 디스플레이 : 인라인 블록

텍스트가 이미지 아래에 줄 바꿈되지 않기 때문에 플로트가 사용되지 않습니다. 그들은 각자의 편에 있어야합니다. 이것이 기본 CSS 문제인 것처럼 느껴지지만 솔루션을 찾기 위해 어떤 노력도하지 못했습니다.

<html> 
    <head> 
     <style> 
      <!-- 
      body { 
       max-width: 900px; 
       margin: 50 auto; 
      } 
      .callout.news { 
       vertical-align: text-top; 
       box-shadow: 0px 0px 3px 2px rgba(167,167,167,.4); 
       padding: 10px; 
      } 
      .callout.news img, 
      .callout.news .content { 
       display: inline-block; 
      } 
      .callout.news img { 
       vertical-align: top; 
      } 
      .callout.news .content { 
       min-width: 200px; 
       max-width: 600px; 
      } 
      --> 
     </style> 
    </head> 

    <body> 
    <div class="callout news"> 
     <img src="http://goo.gl/4ayWDo" /> 
     <div class="content"> 
      <h3>This would be a Header</h3> 
      <p>Sed finibus semper ante, sit amet suscipit mauris tincidunt et. Curabitur eget nisi lorem. Pellentesque vel erat elit. Mauris vehicula leo leo, vel semper ante malesuada et. Aenean laoreet vulputate tristique. Morbi gravida sem at sapien auctor, quis pellentesque ante dignissim. Praesent iaculis sem eget ex feugiat, nec luctus nunc tempus.will focus on the societal impact of human services.</p> 
     </div> 
    </div> 
    </body> 
</html>

출처

2014-10-13 UnsettlingTrend

피들을 제공하십시오. – Frisbetarian

게으른 피들 http://jsfiddle.net/tf2emzLb/ – Marcelo

당신이 이것을 찾고 있다고 생각합니다. http://jsfiddle.net/victor_007/tf2emzLb/1/ –

사용 min-width

.callout.news { 
vertical-align: text-top; 
box-shadow: 0px 0px 3px 2px rgba(167,167,167,.4); 
padding: 10px; 
min-width: 852px;/**add this*/ 
}

body { 
 
       max-width: 900px; 
 
       margin: 50 auto; 
 
      } 
 
      .callout.news { 
 
       vertical-align: text-top; 
 
       box-shadow: 0px 0px 3px 2px rgba(167,167,167,.4); 
 
       padding: 10px; 
 
       min-width: 852px;/**add this*/ 
 
      } 
 
      .callout.news img, 
 
      .callout.news .content { 
 
       display: inline-block; 
 
      } 
 
      .callout.news img { 
 
       vertical-align: top; 
 
      } 
 
      .callout.news .content { 
 
       min-width: 200px; 
 
       max-width: 600px; 
 
      }

<div class="callout news"> 
 
    <img src="http://goo.gl/4ayWDo" /> 
 
    <div class="content"> 
 
     <h3>This would be a Header</h3> 
 
     <p>Sed finibus semper ante, sit amet suscipit mauris tincidunt et. Curabitur eget nisi lorem. Pellentesque vel erat elit. Mauris vehicula leo leo, vel semper ante malesuada et. Aenean laoreet vulputate tristique. Morbi gravida sem at sapien auctor, quis pellentesque ante dignissim. Praesent iaculis sem eget ex feugiat, nec luctus nunc tempus.will focus on the societal impact of human services.</p> 
 
    </div> 
 
</div>

출처

2014-10-13 16:09:12

텍스트가 접히지 만 여전히 이미지 오른쪽에 머물러있게하고 싶습니다. 이것은 텍스트가 그 지점까지 붕괴 될 정도로 작아지지 않는다는 것을 보장하는 것입니다. – UnsettlingTrend

전체 코드는 다음과

body { 
 
    max-width: 900px; 
 
    margin: 50 auto; 
 
} 
 
.callout.news { 
 
    vertical-align: text-top; 
 
    box-shadow: 0px 0px 3px 2px rgba(167, 167, 167, .4); 
 
    padding: 10px; 
 
    overflow: auto; 
 
} 
 
.news img, 
 
.content { 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
.news img { 
 
    margin-right: 10px; 
 
} 
 
.callout.news .content { 
 
    min-width: 200px; 
 
}

<div class="callout news"> 
 
    <div class="content"> 
 
    <img src="http://goo.gl/4ayWDo" /> 
 
    <h3>This would be a Header</h3> 
 

 
    <p>Sed finibus semper ante, sit amet suscipit mauris tincidunt et. Curabitur eget nisi lorem. Pellentesque vel erat elit. Mauris vehicula leo leo, vel semper ante malesuada et. Aenean laoreet vulputate tristique. Morbi gravida sem at sapien auctor, quis 
 
     pellentesque ante dignissim. Praesent iaculis sem eget ex feugiat, nec luctus nunc tempus.will focus on the societal impact of human services.</p> 
 
    </div> 
 
</div>

시도

출처

2014-10-13 16:17:26 Suresh

플로트를 사용하고 텍스트가 넘어지면 플로트 된 이미지 아래로 흘러갑니다. 나는 이미지의 오른쪽에 머무를 텍스트가 필요하다. – UnsettlingTrend

CSS 및 디스플레이 : 인라인 블록

답변

관련 문제