html - 将 2 个标题放在 2 个面板的中间
问题描述
我在下面有这段代码,它由 2 个面板和 2 个标题组成,我想要完成的是将total fruits
标题放在左侧面板的中间,将另一个标题放在右侧。但是,每当我尝试将它们放在中心时,它只会弄乱整个事情是否有正确的方法来做到这一点,因为我不确定如何去做任何建议都会非常感激。
var redpill = {};
var greenpill = {};
var randompill = {};
var key = "Red Fruits";
redpill[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon','Apple', 'Cherry', 'Strawberry', 'Pomegranate'];
var key2 = "Green Fruits";
greenpill[key2] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];
var key3 = "Random Fruits";
randompill[key3] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];
function redraw() {
var combineString = '';
$.each(redpill[key], function(index) {
combineString += ('<div class="pilldiv redpill class">' + redpill[key][index] + '</div>');
});
$('.combineclass').html(combineString);
$.each(greenpill[key2], function(index) {
combineString += ('<div class="pilldiv greenpill class">' + greenpill[key2][index] + '</div>');
});
$('.combineclass').html(combineString);
var randomString = '';
$.each(randompill[key3], function(index) {
randomString += ('<div class="pilldiv randompill class">' + randompill[key3][index] + '</div>');
});
$('.randomclass').html(randomString);
}
function listener() {
$(document).ready(function() {
$(document).on("click", "#suggestid div", function() {
data = this.innerHTML;
$(".total_count_Green_Fruits").html(key2 + ': ' + greenpill[key2].length);
var element = $(this).detach();
$('#currentid').prepend('<div class="new-green-fruit pilldiv class ">' + element.html() + '</div>');
});
});
$('body').on('click', 'div.new-green-fruit', function() {
data2 = this.innerHTML;
$(this).detach();
var element2 = $(this).detach();
$('#suggestid').prepend('<div class="pilldiv randompill class" >' + element2.html() + '</div>');
});
}
redraw();
listener();
.pilldiv {
padding: 8px 15px;
text-align: center;
font-size: 15px;
border-radius: 25px;
color: Black;
margin: 2px;
}
.randompill:after {
content: "\002B";
float: left;
width: 16px;
}
.new-green-fruit:after {
content: "\292B";
float: left;
width: 16px;
}
.redpill {
background-color: Pink;
cursor: default;
}
.greenpill {
background-color: SpringGreen;
cursor: default;
}
.randompill {
background-color: LightBlue;
cursor: pointer;
}
.class {
font-family: Open Sans;
}
.center {
display: flex;
justify-content: center;
}
.wrappingflexbox {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.top {
margin-bottom: 20px
}
h3 {
font-weight: normal;
}
.panel {
display: table;
height: 100%;
width: 85%;
background-color: white;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
.new-green-fruit {
background-color: LightBlue;
cursor: pointer;
}
.top {
margin-bottom: 30px;
}
#leftpanel{
float:left;
width:calc(50% - 5px);
background-color:#f2f2f2;"
}
#rightpanel{
float:right;
width:calc(50% - 5px);
background-color:#f2f2f2;"
}
.container{
display: table;
max-height: 100%;
width: 50%;
background-color:white;
margin-left: auto;
margin-right: auto;
margin-top:25px;
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="//#" />
</head>
<body>
<div class="container">
<h3 class="class center">Total Fruits</h3>
<div id=leftpanel>
<div id="currentid" class="combineclass wrappingflexbox top"></div>
</div>
<h3 class="class center">Random Fruits</h3>
<div id="rightpanel">
<div id="suggestid" class="randomclass wrappingflexbox top"></div>
</div>
</div>
</body>
</html>
解决方案
我稍微调整了您的 HTML 以符合要求。
您需要一个容器来居中标题和面板。如果将标题包装到左右面板中会更容易。
var redpill = {};
var greenpill = {};
var randompill = {};
var key = "Red Fruits";
redpill[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Apple', 'Cherry', 'Strawberry', 'Pomegranate'];
var key2 = "Green Fruits";
greenpill[key2] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];
var key3 = "Random Fruits";
randompill[key3] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];
function redraw() {
var combineString = '';
$.each(redpill[key], function(index) {
combineString += ('<div class="pilldiv redpill class">' + redpill[key][index] + '</div>');
});
$('.combineclass').html(combineString);
$.each(greenpill[key2], function(index) {
combineString += ('<div class="pilldiv greenpill class">' + greenpill[key2][index] + '</div>');
});
$('.combineclass').html(combineString);
var randomString = '';
$.each(randompill[key3], function(index) {
randomString += ('<div class="pilldiv randompill class">' + randompill[key3][index] + '</div>');
});
$('.randomclass').html(randomString);
}
function listener() {
$(document).ready(function() {
$(document).on("click", "#suggestid div", function() {
data = this.innerHTML;
$(".total_count_Green_Fruits").html(key2 + ': ' + greenpill[key2].length);
var element = $(this).detach();
$('#currentid').prepend('<div class="new-green-fruit pilldiv class ">' + element.html() + '</div>');
});
});
$('body').on('click', 'div.new-green-fruit', function() {
data2 = this.innerHTML;
$(this).detach();
var element2 = $(this).detach();
$('#suggestid').prepend('<div class="pilldiv randompill class" >' + element2.html() + '</div>');
});
}
redraw();
listener();
.pilldiv {
padding: 8px 15px;
text-align: center;
font-size: 15px;
border-radius: 25px;
color: Black;
margin: 2px;
}
.randompill:after {
content: "\002B";
float: left;
width: 16px;
}
.new-green-fruit:after {
content: "\292B";
float: left;
width: 16px;
}
.redpill {
background-color: Pink;
cursor: default;
}
.greenpill {
background-color: SpringGreen;
cursor: default;
}
.randompill {
background-color: LightBlue;
cursor: pointer;
}
.class {
font-family: Open Sans;
}
.center {
display: flex;
justify-content: center;
}
.wrappingflexbox {
display: flex;
flex-wrap: wrap;
justify-content: center;
background-color: #f2f2f2;
}
.top {
margin-bottom: 20px
}
h3 {
font-weight: normal;
}
.panel {
display: table;
height: 100%;
width: 85%;
background-color: white;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
.new-green-fruit {
background-color: LightBlue;
cursor: pointer;
}
.top {
margin-bottom: 30px;
}
#leftpanel {
flex-basis: calc(50% - 5px);
}
#rightpanel {
flex-basis: calc(50% - 5px);
}
.container {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-flow: row nowrap;
max-height: 100%;
width: 50%;
background-color: white;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id=leftpanel>
<h3 class="class center">Total Fruits</h3>
<div id="currentid" class="combineclass wrappingflexbox top"></div>
</div>
<div id="rightpanel">
<h3 class="class center">Random Fruits</h3>
<div id="suggestid" class="randomclass wrappingflexbox top"></div>
</div>
</div>
推荐阅读
- javascript - 在 Chrome 扩展中使用语义 UI 反应?
- java - 底部应用栏问题
- css - 使用 flexbox 使相邻图像居中
- python - 从python中的列表中选择某些元素
- python - 在 anaconda 中安装 Geonamescache
- ubuntu - 无法在 Ubuntu for Windows 中更改 etc/passwd
- ibm-cloud - IBM Assistant - 为什么我不能检查现有/设置的实体,而不是通过上下文变量检查?
- c++ - C++ 和 Go
标头正在引发错误 - java - Java json 对象替换键名
- reactjs - 使用 react-router-dom 的受保护页面不起作用