Question

我有两个div＆＃34; .left-panel＆＃34;和＆＃34; .right-panel＆＃34;包含在父元素内部，这是一个名为＆＃34; .container＆＃34;的div。一切都工作得很好，我把两个面板对齐在中间，然后我决定为面板添加两个h2标头，h2元素互相推下。如何在同一行中获取h2元素？我试过浮动它们，设置它们的宽度，边距，填充，显示样式......我看了其他答案，但我认为我的不同，因为它包含在div和.container div中！在我的屏幕截图中，它显示了h2元素跨越整行，我希望在同一行中的两个h2元素与两个div的标题。感谢所有帮助，谢谢！

HTML代码

`<!DOCTYPE HTML>
<html lang="en">
<head>

<title>Remember Your Diet</title>
<link rel="stylesheet" href="css/style.css">

</head>

<body>

<div class="main-wrapper">
    <header class="main-header">
        <h1 id="main-logo"><a href="#"> Food </a></h1>

        <ul id="main-nav">

            <li> <a href="#">How Much </a></li>
            <li> <a href="#">Nutrition </a></li>
            <li> <a href="#">How Often </a></li>

        </ul>

    </header>

<div class="container">
<br>
<h2 id="left-header">Food Source</h2>
    <div class="left-panel">
    <p> The first key to keeping the tracked changes with the text being copied is to make sure the “Track Changes” feature is turned off. To do this, click the “Review” tab on the ribbon. If the “Track Changes” button in the “Tracking” section is highlighted in blue, the “Track Changes” feature is on. Click the lower-half of the “Track Changes” button and select “Track Changes” from the drop-down menu. The “Track Changes” button should not be highlighted when the feature is off</p>



    </div>

<h2 id="right-header">Nutritional Facts</h2>
    <div class="right-panel">
        <p> The first key to keeping the tracked changes with the text being copied is to make sure the “Track Changes” feature is turned off. To do this, click the “Review” tab on the ribbon. If the “Track Changes” button in the “Tracking” section is highlighted in blue, the “Track Changes” feature is on. Click the lower-half of the “Track Changes” button and select “Track Changes” from the drop-down menu. The “Track Changes” button should not be highlighted when the feature is off</p>



    </div>

    <div class="current-day">
        <p> Today is November 10th, 2015

    </div>

</div>







</div>
</body>
</html>`

下面的CSS代码

    body {
    height: 100%;
    background-color: green;
}

header {
    margin-top: -8px;
    margin-left: -10px;
    padding: 10px;
    background-color: darkgrey;
    width: 100%;
}

#main-logo,
#main-nav,
#main-nav li {
    display: inline-block;
    margin-top: 0px;
    margin-bottom: 0px;
}

#main-logo,
#main-nav li {
    border-radius: 5px;
    list-style-type: none;
}

#main-logo {
    background-color: forestgreen;
    margin-right: 30px;
}

#main-nav li {
    background-color: gold;
    margin-right: 10px;
}

#main-logo a,
#main-nav li a {
    text-decoration: none;
    text-align: center;
}

#main-logo a {
    padding: 10px 20px;
    color: gold;
}

#main-nav li a {
    color: forestgreen;
    padding: 20px 40px;
}

.container {
    display: inline-block;
    width: 100%;
    min-height: 550px;
}

#left-header {
    max-width:40%;
    margin-left: 3%;
    color: black;
    padding: 0px;
}

#right-header {
    max-width:40%;
    margin-left: 10%;
    color: black;
    padding: 0px;
}

.left-panel {
    border: 2px solid black;
    width: 40%;
    min-height: 300px;
    display: inline-block;
    margin-left: 3%;
    background-color: gold;
}

.right-panel {
    border: 2px solid black;
    width: 40%;
    min-height: 300px;
    display: inline-block;
    margin-left:10%;
    background-color: gold;

}

.current-day {
    width: 40%;
    margin-left: 2.5%;
}

Answer 1

在面板h2中也添加divs。

您可以将黄色bg和边框添加到p标记。或者添加另一个内部div以提供黄色bg和边框，以防有多个p标记。

＆＃13;

  body {
height: 100%;
background-color: green;
}

header {
margin-top: -8px;
margin-left: -10px;
padding: 10px;
background-color: darkgrey;
width: 100%;
}

#main-logo,
#main-nav,
#main-nav li {
display: inline-block;
margin-top: 0px;
margin-bottom: 0px;
}

#main-logo,
#main-nav li {
border-radius: 5px;
list-style-type: none;
}

#main-logo {
background-color: forestgreen;
margin-right: 30px;
}

#main-nav li {
background-color: gold;
margin-right: 10px;
}

#main-logo a,
#main-nav li a {
text-decoration: none;
text-align: center;
}

#main-logo a {
padding: 10px 20px;
color: gold;
}

#main-nav li a {
color: forestgreen;
padding: 20px 40px;
}

.container {
display: inline-block;
width: 100%;
min-height: 550px;
}



.left-panel, .right-panel {
width: 40%;
display: inline-block;
margin-left: 3%;
}

.right-panel {
margin-left:10%;

}

.left-panel .inner, .right-panel .inner{
border: 2px solid black;
min-height: 300px;
background-color: gold;
}

.current-day {
width: 40%;
margin-left: 2.5%;
}

＆＃13;

<div class="main-wrapper">
<header class="main-header">
    <h1 id="main-logo"><a href="#"> Food </a></h1>

    <ul id="main-nav">

        <li> <a href="#">How Much </a></li>
        <li> <a href="#">Nutrition </a></li>
        <li> <a href="#">How Often </a></li>

    </ul>

</header>

<div class="container">
<br>
<div class="left-panel">
<h2 id="left-header">Food Source</h2>
    <div class="inner">
<p> The first key to keeping the tracked changes with the text being copied is to make sure the “Track Changes” feature is turned off. To do this, click the “Review” tab on the ribbon. If the “Track Changes” button in the “Tracking” section is highlighted in blue, the “Track Changes” feature is on. Click the lower-half of the “Track Changes” button and select “Track Changes” from the drop-down menu. The “Track Changes” button should not be highlighted when the feature is off</p>

</div>

</div>

<div class="right-panel">
<h2 id="right-header">Nutritional Facts</h2>
    <div class="inner">
    <p> The first key to keeping the tracked changes with the text being copied is to make sure the “Track Changes” feature is turned off. To do this, click the “Review” tab on the ribbon. If the “Track Changes” button in the “Tracking” section is highlighted in blue, the “Track Changes” feature is on. Click the lower-half of the “Track Changes” button and select “Track Changes” from the drop-down menu. The “Track Changes” button should not be highlighted when the feature is off</p>

</div>

</div>

<div class="current-day">
    <p> Today is November 10th, 2015

</div>

</div>







</div>

＆＃13;

https://jsfiddle.net/afelixj/wrL6vnye/

Answer 2

将H2元素放在div面板内。

<div class="left-panel">
    <h2 id="left-header">Food Source</h2>
    <p> The first key to keeping the tracked changes with the text being copied is to make sure the “Track Changes” feature is turned off. To do this, click the “Review” tab on the ribbon. If the “Track Changes” button in the “Tracking” section is highlighted in blue, the “Track Changes” feature is on. Click the lower-half of the “Track Changes” button and select “Track Changes” from the drop-down menu. The “Track Changes” button should not be highlighted when the feature is off</p>
</div>

<div class="right-panel">
<h2 id="right-header">Nutritional Facts</h2>
    <p> The first key to keeping the tracked changes with the text being copied is to make sure the “Track Changes” feature is turned off. To do this, click the “Review” tab on the ribbon. If the “Track Changes” button in the “Tracking” section is highlighted in blue, the “Track Changes” feature is on. Click the lower-half of the “Track Changes” button and select “Track Changes” from the drop-down menu. The “Track Changes” button should not be highlighted when the feature is off</p>
</div>

然后更改CSS中的样式以从整个div中删除黄金背景和边框，并仅将其指定给P标记。

.left-panel {
    width: 40%;
    min-height: 300px;
    display: inline-block;
    margin-left: 3%;    
}

.right-panel {
    width: 40%;
    min-height: 300px;
    display: inline-block;
    margin-left:10%;
}
.left-panel p,
.right-panel p{
    border: 2px solid black;
    background-color: gold;
}

这是最简单的方法。

Answer 3

您可能想要使用table元素。它降级但会实现你的目标。使用td class="YOUR_CLASS"属性，它会更好。

Answer 4

我明白了！我移动了＃34;＃right-header＆＃34;在＆＃34; .left-panel＆＃34;之前然后将两个h2元素设置为内联块，这允许我自定义它们的宽度和边距！这是网站和代码的样子！

HTML

    <div class="container">
<br>
    <h2 id="left-header">Food Source</h2>
    <h2 id="right-header"> Nutriton Facts </h2>

    <div class="left-panel">
    <p> The first key to keeping the tracked changes with the text being copied is to make sure the “Track Changes” feature is turned off. To do this, click the “Review” tab on the ribbon. If the “Track Changes” button in the “Tracking” section is highlighted in blue, the “Track Changes” feature is on. Click the lower-half of the “Track Changes” button and select “Track Changes” from the drop-down menu. The “Track Changes” button should not be highlighted when the feature is off</p>



    </div>

    <div class="right-panel">
        <p> The first key to keeping the tracked changes with the text being copied is to make sure the “Track Changes” feature is turned off. To do this, click the “Review” tab on the ribbon. If the “Track Changes” button in the “Tracking” section is highlighted in blue, the “Track Changes” feature is on. Click the lower-half of the “Track Changes” button and select “Track Changes” from the drop-down menu. The “Track Changes” button should not be highlighted when the feature is off</p>



    </div>

CSS

    .container {
    display: inline-block;
    width: 100%;
    min-height: 550px;
}

#left-header {
    width:40%;
    color: black;
    margin-left: 3%;
    display: inline-block;
}

#right-header {
    width:40%;
    color: black;
    padding: 0px;
    margin-left: 10%;
    display: inline-block;
}


.left-panel {
    border: 2px solid black;
    width: 40%;
    min-height: 300px;
    display: inline-block;
    margin-left: 3%;
    background-color: gold;
}

.right-panel {
    border: 2px solid black;
    width: 40%;
    min-height: 300px;
    display: inline-block;
    margin-left:10%;
    background-color: gold;

}

h2元素推动其他h2和div。两个div，两个标题，并且它们被包裹在父div中

4 个答案: