如何把兩個元素並排

我試圖把兩個元素並排，但我不能讓它工作。我tryed浮動：左和顯示：內聯塊，並沒有工作。我嘗試把內聯樣式，文件樣式，頭部樣式，並沒有任何工作。如何把兩個元素並排

HTML： `

{% extends "layout.html" %} 
{% block title %} Home {% endblock %} 
{% block head %} 
    <script src="{{ url_for('static', filename='isp_home/main.js')}}"></script> 
    <script src="{{ url_for('static', filename='libs/poseidon.min.js')}}"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
    <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="{{ url_for('static', filename='isp_home/main.css')}}"> 
{% endblock %} 
{% block body %} 
    <div class="container" id="welcome" style="margin-top: 3%;"> 
    <h1 style="text-align: center;">Welcome back to Dataflow</h1> 
    <h2 style="text-align: center;">Click to change view</h2> 
    </div> 
    <div class="container main" style="margin-top: 3%;"> 
    <div class="container main-info"> 
     <i class="fa fa-btc" style="font-size: 6em"></i> 
     <h2> DataCoin wallet: </h2> 
     <h3> DataCoins: 50 </h3> 
     <h3> DataCoin Trust: 50 </h3> 
    </div> 
    <div class="container main-info"> 
     <i class="fa fa-server" style="font-size: 6em;"></i> 
     <h2> Computating Power Usage: </h2> 
     <h3> Decryption: 40% </h3> 
     <h3> DataCoin Mining: 40% </h3> 
     <h3> Spamming and Pishing: 20% </h3> 
    </div> 
    <div class="container main-info"> 
     <i class="fa fa-server" style="font-size: 6em"></i> 
     <h2> Computating Power Usage: </h2> 
     <h3> Decryption: 40% </h3> 
     <h3> DataCoin Mining: 40% </h3> 
     <h3> Spamming and Pishing: 20% </h3> 
    </div> 
    </div> 
{% endblock %}

CSS：

body { 
    background-color: #0d0d0d; 
    font-family: 'Raleway'; 
    color: white; 
} 
* { 
    font-family: 'Raleway'; 
    color: white; 
} 
.main-info { 
    margin-top: 3%; 
    margin-left: 0%; 
    display: inline-block; 
    float: left; 
} 
.main { 
    width: 100%; 
}

來源

2016-03-06 Dimitri_Wayland

你想擁有全部三個。主要-信息的div的浮動彼此相鄰的在同一行？他們似乎是這樣做的：https：//jsfiddle.net/fLr8k1fr/1/。或者你是否想要像問題中所述的兩個元素？如果是這樣，哪兩個要素？ –

http://stackoverflow.com/a/32122011/3597276 –

您需要設置一個寬度的爲元素「主要-信息」值。價值不一定是百分比。

.main-info { 
    margin-top: 3%; 
    margin-left: 0%; 
    display: inline-block; 
    float: left; 
    width: 30%;// could be 100px for example 
}

見https://jsfiddle.net/bgdvxce4/

來源

2016-03-06 23:36:15 Pengcheng

謝謝！它的工作原理_well_ –

如何把兩個元素並排

回答

相關問題