如何把两个元素并排

我试图把两个元素并排，但我不能让它工作。我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_ –

如何把两个元素并排

回答

相关问题