隣り合っている3つのdivが正しく動作していない

Question

ウェブページがありますコードを少し変更したいのですが。私は、左の円のメニューに、中間のテキストに、そして右のピクチャに持っていなければなりません。私は3つの分離されたdivs/columnsを作りたいと思う。 ここに私の意味を見ることができます：https://plnkr.co/edit/5NWm4E868nXYyixd2SLv?p=preview

基本的に私は3つの長いdivsを作りたいと思います。 （垂直方向）と他のdiv内のすべてのテキストとの間にあるスペースを入れて、すべての画像を貼り付けてコピーするだけです。

ページは同じように見える必要があります。だから、それは本当にのorignalページのように見えないhttps://plnkr.co/edit/8re5W6mz73pnU40WaXP8?p=preview

：

は、今のところ私はこの（ちょうど関連部分）を持っています。私の質問は何が間違っているのですか？たとえば、別のサークルメニューの画像を追加する場合は、その下にではなく、その隣に が表示されます。そして、ページ全体が台無しになる。これを修正するには？

#pageMiddle { 
 
    width: 100%; 
 
    margin: 10px auto; 
 
} 
 

 
#midleft { 
 
    width: 20%; 
 
    margin: 0px; 
 
    display: block; 
 
    float: left; 
 
    background: orange; 
 
} 
 

 
#midmid { 
 
    width: 50%; 
 
    margin: 0px; 
 
    display: block; 
 
    float: left; 
 
    background: green; 
 
} 
 

 
#midright { 
 
    width: 30%; 
 
    margin: 0px; 
 
    display: block; 
 
    float: left; 
 
    background: red; 
 
} 
 

 
.imageleft { 
 
    float: left; 
 
    margin: 00% 10% 00% 00%; 
 
} 
 

 
.circle { 
 
    border: solid 2px #73B7DB; 
 
    background: #73B7DB; 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 100px; 
 
    text-align: center; 
 
    line-height: 440%; 
 
    font-size: 22px; 
 
    text-decoration: none; 
 
} 
 

 
.imageright { 
 
    margin: 0% 0% 0% 0%; 
 
    width: 300px; 
 
    height: 174px 
 
}

<div id="pageMiddle"> 
 
    <div id="midleft"> 
 
    <a class="imageleft circle" id="how"> 
 
     <font color="white">Wie</font> 
 
    </a> 
 
    </div> 
 

 

 
    <div id="midmid">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</div> 
 

 
    <div id="midright"><img class="imageright" src="https://placehold.it/300x200" /></div> 
 
</div>

Answer 1

私が正しく理解していれば、あなたは#pageWrapper

<div id="pageWrapper"> 
    <div id="pageMiddle"> 
     <div id="midleft"><a class="imageleft circle" id="how"><font color="white">Wie</font></a></div> 
     <div id="midmid">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</div> 
     <div id="midright"><img class="imageright" src="https://placehold.it/300x200" /></div> 
    </div> 
    <div id="pageMiddle"> 
     <div id="midleft"><a class="imageleft circle" id="how"><font color="white">Wie</font></a></div> 
     <div id="midmid">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</div> 
     <div id="midright"><img class="imageright" src="https://placehold.it/300x200" /></div> 
    </div> 
</div> 

の内側に、このような全体のdivをラップする必要があると私はあなたを理解していれば、いくつかの変更は、CSS

#pageWrapper{ 
    width: 100%; 
    /*max-width:1200px;*/ 
    margin: 0px auto; 
} 
#pageMiddle { 
    width: 100%; 
    margin:10px 0; 
    float:left; 
} 

Answer 2

です正しく、あなたはdifferenを見る必要がありますあなたのコード内のce。達成したいコードには、コンポーネントのための別々のdivはありませんが、マージンで区切り、イメージのサイズとサークルを制限します。その後、浮動小数点浮動小数点です。テキストは利用可能な残りのスペースを埋めるだけです。異なる行は、マージンでフレキシブルに（つまり％）区切られます。

こちらがお役に立てば幸いです。

Answer 3

あなたが探しているものは100％ではありませんが、私が見る限りフレックスボックスを利用することでこれを非常に簡単にすることができます。これについては多くの方法がありますが、フレックスボックスは（私にとっては）最もクリーンで簡単です。

フレックスコンテナの内側に3つのdivを配置し、各内側divに％幅を与えます。 （境界がちょうどショーのdiv領域を助けるためにある）

<article class="container"> 
<div class="leftCol"> 
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Lol_circle.png" /> 
</div>  
<div class="centCol"> 
<p> Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. 
</p> 
</div>  
<div class="rightCol"> 
<img src="http://ursispaltenstein.ch/blog/images/uploads_img/random_natural_acts.jpg" /> 
</div> 
</article> 

とCSS：

.container { 
display:flex; 
} 
.centCol { 
border: 1px solid red; 
width: 50%; 
} 
leftCol, rightCol { 
border: 1px solid blue; 
width: 25%; 
} 
.leftCol img, .rightCol img { 
max-width: 100%; 
} 

は、この情報がお役に立てば幸いです。ここでは、おもちゃをお持ちの場合のリンクをご紹介します。https://codepen.io/11PH/pen/NvNZoe?editors=1100

Answer 4

ここでは、達成したいことのための別の解決策があります。それはブートストラップフレームワークを使用し、また応答性があります。次の例でコードをチェックすることができます。 これは、4つのCSSクラスのみを使用し、レイアウトを調整するためのブートストラップ応答のcol-*-*クラスを内蔵しています。

https://codepen.io/Nasir_T/pen/OjNebO

希望はこのことができますし、十分な知識を追加します。