将2个标题放置在2个面板的中间

Question

我下面的代码由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> 

Answer 1

我对您的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>