Как поставить два элемента бок о бок

Im пытается поставить два элемента бок о бок, но я не могу заставить его работать. Я попробовал float: left и display: inline-block, и никто из них не работал. Я попытался положить в линию стиль, стиль файла, стиль головы, и никто из них не работал.Как поставить два элемента бок о бок

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

Вы пытаетесь иметь все три из .main-инфо дивы плавающие рядом друг с другом на одной и той же линии? Они, похоже, делают это: https://jsfiddle.net/fLr8k1fr/1/. Или вам нужны два элемента, как вы заявили в вопросе? Если да, то какие два элемента? –

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

Вы должны установить значение шириной в для элемента ".main-инфо". Значение не должно быть процентом.

.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

Спасибо! Это работает хорошо_ –

Как поставить два элемента бок о бок

ответ

Смежные вопросы