3格彼此相鄰無法正常工作

我收到了一個網頁，我想在代碼中進行一點改動。我必須在左邊的圓形菜單中，在中間的文字和右邊的圖片。我想製作3個獨立的div /列。你可以在這裏看到我的意思：https://plnkr.co/edit/5NWm4E868nXYyixd2SLv?p=preview 3格彼此相鄰無法正常工作

基本上我想讓3個長divs在哪裏你可以例如，只需將（垂直）和其他div中的所有文字之間的一些空格複製粘貼所有圖片即可。

因此頁面必須看起來一樣。

現在我有這個（只是相關部分）：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>

來源

2017-08-01 Lego

如果我理解正確，你必須包裝內#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; 
}

來源

2017-08-01 13:43:59 Hareesh

嗨Hareesh，你的答案看起來不錯。也許我沒有制定出我想要的足夠好的東西。所以我想要3個長格。我想要這樣，以便我可以把我想要的任何地方的照片放在一起，比如放上兩個相同大小的兩張照片。但現在我可以在段落旁邊放一張圖片，我沒有太多的自由。這裏是一個關於我想要的3長格子的例子：http://jsfiddle.net/8njq1505/ – Lego

仍然不清楚你的意圖。你有任何參考它應該看起來如何？ – Hareesh

https://ibb.co/jDF6hF看看這個，這是我想要的那種格式。希望它有助於 – Lego

如果我理解你正確的，你需要看看差異ce在你的代碼中。你想要實現的代碼沒有爲組件分開的div，而是用margin來分隔它們，並限制了圖像的大小和圓圈。然後漂浮浮動他們。文本只是填充剩餘的可用空間。不同的行以靈活的術語（即％）按保證金分隔。

我希望這會有所幫助。

來源

2017-08-01 13:44:00 omukiguy

我不是100％你正在尋找什麼，但據我所見，你可以通過使用彈性盒來極大地簡化這一點。雖然有很多方法可以解決這個問題，但柔性盒似乎是最乾淨和最簡單的（對我來說）。

將3個div放在flex容器中，並給每個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

來源

2017-08-01 13:47:48

這是另一種解決方案，你想達到什麼。它使用引導框架並且也是響應式的。您可以在下面的示例中查看代碼。它只使用4個CSS類，並內置自舉響應col-*-*類來調整佈局。

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

希望這有助於增加和良好的知識。

來源

2017-08-01 14:04:43

3格彼此相鄰無法正常工作

回答

相關問題