이미지 및 단락 인라인 있음

Question

단락과 이미지를 서로 나란히 놓고 둘 다 가운데에 맞 춥니 다. 다음은 내가하려는 일의 예입니다. 조금 아래로 스크롤하여 봅니다.

http://shibori-demo.squarespace.com/how-shibori-works-shibori/

나는이 작업을 얻을 수 있지만 모두가 뷰포트의 왼쪽까지 찌그러된다. 이 효과를 얻는 가장 좋은 방법은 무엇입니까?

Answer 1

DIVs. 많은 divs. width:100% 한 후 text-align:center

에 두 항목을 넣어 래퍼 DIV이다

먼저 외측 DIV는. 너무 내부 div가 (스타일 사용 플로트) 높이를 가지고 overflow:hidden 스타일한다.

마지막으로, 각 항목 주위 사업부는 float:left

div {position:relative;box-sizing:border-box;} 
 
.wrapper{width:100%;border:1px solid orange;} 
 
    .innerwrap{width:100%;overflow:hidden;} 
 
    .boxes{float:left;width:50%;padding:10px;} 
 
    .leftBox {} 
 
    .rightBox{}

<div class="wrapper"> 
 
    <div class="innerwrap"> 
 
    <div class="boxes leftBox"> 
 
     <img src="http://placekitten.com/230/300" /> 
 
    </div> 
 
    <div class="boxes rightBox"> 
 
     <p>Ad vidit contentiones consequuntur sea, quod eripuit assentior an nec. Cu errem eruditi est, quando everti duo eu. Eum consul noster vocent ex, at ius viris aeterno omittam. His nonumy lobortis convenire ei. Sea eu justo choro qualisque. Dolore pertinax accommodare quo et, per ad debet delenit splendide. Voluptua sapientem id eos.</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

로 당신이 사용하는 플렉스 속성을 준 예를 자신의 상자 및 스타일을 각각 제공한다. 간단히 말해, display : flex를 사용하여 div 컨테이너에 요소를 넣어 작업을 수행 할 수 있습니다.

<div class="container"> 
    <p class="inner">text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. 
    </p> 
    <img src="http://placehold.it/200x350"/> 
</div> 

는 CSS는 간단하다

.container { 
     display: flex; 
    } 

여기 flex에 대한 완전한 가이드와 display 속성에 문서입니다.

그런 다음 필요한 너비로 너비를 변경하고 가운데 놓습니다.

.container { 
    display: flex; 
    width: 80%; 
    margin: 0 auto; 
}