イメージと同じ段落の段落をCSSで整列するにはどうすればいいですか？私は以下に示すように、段落や画像が同一線上に並ぶデザインしてい

Question

：この時点で

を、私はこれがfiddleである取得することができています。私はブートストラップ3を使用しています。私はdisplay: inline-block, display: block and display: inlineを使ってみましたが、残念ながら私は段落と画像を上の図のようにデザインに入れられません。

段落部分のHTMLコードは次のとおりです。

<div id="line2" class="col-lg-12"> 
    <div class="cofounder-ceo-image"> 
    <img src="assets/img/Uploads/jack.jpg"> </div> 
    <p>Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say </p> 
</div> 

Answer 1

あなたはフロートと方向を使用する必要があります。RTLを。

#line2 .cofounder-ceo-image{float: left;} 
#line3{direction: rtl;}/*this is for right align like arabic*/ 
#line3 .cofounder-ceo-image{float: right;} 

Answer 2

float: leftを使用すると、画像を段落の近くで「浮かせる」ようにすることができます。あなたは既にグリッドを使用して、その列の中に画像を入れていること

img { 
 
    border-radius: 100%; 
 
    width: 100px; 
 
    height: 100px; 
 
    object-fit: cover; 
 
    float: left; 
 
    margin-right: 20px; 
 
}

<div id="line2" class="col-lg-12"> 
 
    <div class="cofounder-ceo-image"> 
 
    <img src="https://i.pinimg.com/736x/ee/bd/cc/eebdcc1600cae9e1d7ac3ef5e33b8778--series-on-netflix-drama-series.jpg"> </div> 
 
    <p>Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you 
 
    say Whatever you say </p> 
 
</div>

Answer 3

よう

何か。これは、浮動小数点で作業するのではなく、グリッドシステムがあなたのためにすべてを管理することを意味します。など、彼らはレイアウトをめちゃくちゃ、容器の外に拡張のような他の問題を導入することができます流れのうちの要素を取るため、このような状況には理想的ではない

フロート、

2列を持つ新しい行に画像やテキストを追加する例：（画像が応答するために）必要

<div id="line2" class="col-lg-12"> 
    <div class="row"> 
     <div class="col-sm-4"> 
     <div class="cofounder-ceo-image"> 
      <img src="https://s26.postimg.org/6lwl4wpxl/jack.jpg"> 
     </div> 
     </div> 
     <div class="col-sm-8"> 
     <p>Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever 
      you say Whatever you say </p> 
     <p class="ceo">ABC DEF - Co-founder and CEO</p> 
     </div> 
    </div> 
    </div> 

追加CSS：

.row img { 
    width: auto; 
    max-width:100%; 
    height: auto; 
} 

これにより、コンテナの幅の100％まで収まるようになります。すなわち、実際の幅よりも伸びない。
これで、あなたのCSSのために必要な唯一の変更 - あなたは確かスパンの追加を開始する必要はありません、など

フィドル：https://jsfiddle.net/cvaxvzbf/

注：

1. 画像は4/12の列（すなわち、行の3分の1）にあり、テキストは8/12にあります。これは、これに合わせて変更することができます。
2. 小さなディスプレイ（< 768px）では、イメージとテキストが別々の行に表示されます。そうでなければ、イメージが小さすぎる可能性があります。これを変更する場合は、col-xs-?などを使用できます。col-xs-6を両方の列でそれぞれ1/2にします。
3. 上記のCSSは、列がイメージよりも小さい場合、イメージを列幅に合わせます。幅が広い場合（つまり、実際のサイズよりも画像が大きく表示されない場合）、画像を拡大することはできません。その場合は、幅を100％に変更します。

Answer 4

単に例えば、画像をフロート：浮動要素で

<img style="float:left;" src="assets/img/Uploads/jack.jpg">