イメージと段落をインラインに置く

Question

段落とイメージを隣り合わせに配置し、両者を中央に配置したいと考えています。ここに私がしようとしているものの例があります。下にスクロールして見てください。

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

私はこの仕事を得ることができますが、それはすべての ビューポートの左側にまで押しつぶされます。この効果を得るための最良の方法は何ですか？

Answer 1

DIV。 divの多く。

まず、及びwidth:100%であり、そして二つのアイテムを置くためにラッパーDIV text-align:center

外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

、それらが自分のボックスを与えるために、各アイテムの周りのdiv、スタイルごとに使用したフレックス性質を与えた例。簡単に言えば、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; 
}