如何順序顯示div？

嗨，大家好，我被困在這。我有一個div，但是當我創建相同的div類時，它將顯示在下一行。但我想出現在第一個div旁邊的第二個div。代碼是：如何順序顯示div？

 <html> 
    <head> 
    <style> 
    .box3{ 
    margin: 20px auto; 
    width: 300px; 
    min-height: 310px; 
     padding: 10px; 
     position:relative; 
    background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#fff), color-stop(.1,#fff)); 
    border: 1px solid #ccc; 
    -webkit-border-radius: 60px 5px; 
    -webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset; 
    } 
    .box3:before{ 
    content: ''; 
     width: 50px; 
     height: 50px; 
    top:0; right:0; 
     position:absolute; 
     display: inline-block; 
    z-index:-1; 
    -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); 
    -webkit-transform: rotate(2deg) 
        translate(-14px,20px) 
         skew(-20deg); 
    } 

    .box3:after{ 
    content: ''; 
     width: 100px; 
    height: 100px; 
    top:0; left:0; 
     position:absolute; 
    z-index:-1; 
     display: inline-block; 
    -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); 
     -webkit-transform: rotate(2deg) 
        translate(20px,25px) 
         skew(20deg); 
    } 
    .box3 img { 
    width: 100%; 
     margin-top: 15px; 
    } 
    p{ 
    margin-top: 15px; 
    text-align: justify; 
    } 
    h1{ 
    font-size: 20px; 
    font-weight: bold; 
    margin-top: 5px; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3); 
    } 
    a{ 
    text-decoration: none; 
    color: #4A4A4A !important; 
    } 
    a:hover{ 
    text-decoration: underline; 
    color: #6B6B6B !important ; 
    } 
    </style> 
    </head> 
    <body> 
    <div> 
    <div class="box3"> 
    <h1>Sample Box</h1> 
    <img src="http://www.wpthemegenerator.com/wp- content/uploads/2012/06/Image.jpg"> 
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra. 
    </p> 
    <br /> 
    <a href="http://www.designshock.com/"> DesignShock.com </a> 
    </div> 
    <div class="box3"> 
    <h1>Sample Box</h1> 
    <img src="http://www.wpthemegenerator.com/wp-content/uploads/2012/06/Image.jpg"> 
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra. 
    </p> 
    <br /> 
    <a href="http://www.designshock.com/"> DesignShock.com </a> 
    </div> 
    </div> 
    </body> 
    </html>

來源

2015-10-03 Syam Sree

你的意思是：https://jsfiddle.net/sebastianbrosch/xa27czzL/ –

是的。但是使用float =「left」屬性我的網站設計沒有跟上它。你能提出另一種方法嗎？ –

是你的網站設計公開？該代碼正在爲我工作，但它看起來像你的網站設計工作不同的例子。 –

有兩種不同的解決方案使用float或flexbox。

解決方案＃1（浮）

添加float:left;到類.box3 - 看到這個小提琴：https://jsfiddle.net/sebastianbrosch/xa27czzL/

解決方案＃2（Flexbox的）

添加一個新類的包圍等方框的div，併爲此容器添加新的樣式表，其中包含屬性display:flex;

.container { 
    display:flex; 
}

請參閱下面搗鼓一個例子：https://jsfiddle.net/sebastianbrosch/xa27czzL/1/

關於使用Flexbox的，你可以在這裏找到

來源

2015-10-05 12:16:21

謝謝我的朋友....它適用於我.... –

如何順序顯示div？

回答

相關問題