<分区>
<分区>
我试图并排放置两个元素，但无法正常工作。我尝试了 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%;
}
最佳答案
您需要为元素“.main-info”设置一个宽度值。该值不必是百分比。
.main-info {
margin-top: 3%;
margin-left: 0%;
display: inline-block;
float: left;
width: 30%;// could be 100px for example
}
关于html - 如何并排放置两个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35833827/