我有两个标题和两个段落。但是段落的第一项是在其他行上概述的:
Header
waspeen: 3304.07
ananas: 24
appel: 3962.0
Header
waspeen: 3304.07
ananas: 30
appel: 3962.0
那么如何让所有的东西彼此一致呢?
让它看起来像:
Header Header
waspeen: 3304.07 waspeen: 3304.07
ananas: 30 ananas: 24
appel: 3962.0 appel: 3962.0
css:
#gallery-text-left {
/* Added */
width: 50%;
}
#gallery-paragraph-1 {
margin-right: 50px;
border-radius: 50px;
padding-left: 50px;
display: inline;
/* Added */
}
#gallery-paragraph-2 {
margin-right: 50px;
border-radius: 4px;
padding-left: 50px;
display: inline;
}
#gallery-text-right {
/* Added */
width: 50%;
}
html:和
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="{% static 'main/css/custom-style.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'main/css/bootstrap.css' %}" />
</head>
<body>
<div class="container center">
<div id="gallery-text">
<div id="gallery-text-left" style="float:left">
<p id="gallery-text-quote-left" style="font-family:Century Gothic; color:#006600"><b> Header</b></p>
<p id="gallery-paragraph-1" style="font-family:Georgia">
{% for key, value in content %}
<span {% if key in diff_set %} style="color: red;" {% endif %}>{{ key }}: {{value}}</span><br>
{% endfor %}
</p>
</div>
<div id="gallery-text-right" style="float:left">
<p id="gallery-text-quote-right" style="font-family:Century Gothic; color:#006600"><b>Header</b></p>
<p id="gallery-paragraph-2" style="font-family:Georgia">
{% for key, value in content_excel %}
<span {% if key in diff_set %} style="color: red;" {% endif %}>{{ key }}: {{value}}</span><br>
{% endfor %}
</p>
</div>
</div>
</div>
</body>
</html>
您正在寻找flexbox，或者您可以使用grid，下面的代码应该工作。
#gallery-text-left {
/* Added */
width: 50%;
display: flex;
flex-direction: column;
}
#gallery-text {
/* Added */
width: 100%;
display: flex;
}
#gallery-paragraph-1 {
border-radius: 50px;
display: flex;
flex-direction: column;
}
#gallery-paragraph-2 {
border-radius: 4px;
display: flex;
flex-direction: column;
}
#gallery-text-right {
/* Added */
display: flex;
flex-direction: column;
width: 50%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="{% static 'main/css/custom-style.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'main/css/bootstrap.css' %}" />
</head>
<body>
<div class="container center">
<div id="gallery-text">
<div id="gallery-text-left">
<p id="gallery-text-quote-left" style="font-family:Century Gothic; color:#006600"><b> Header</b></p>
<p id="gallery-paragraph-1" style="font-family:Georgia">
{% for key, value in content %}
<span {% if key in diff_set %} style="color: red;" {% endif %}>{{ key }}: {{value}}</span><br> {% endfor %}
</p>
</div>
<div id="gallery-text-right" style="float:left">
<p id="gallery-text-quote-right" style="font-family:Century Gothic; color:#006600"><b>Header</b></p>
<p id="gallery-paragraph-2" style="font-family:Georgia">
{% for key, value in content_excel %}
<span {% if key in diff_set %} style="color: red;" {% endif %}>{{ key }}: {{value}}</span><br> {% endfor %}
</p>
</div>
</div>
</div>
</body>
</html>