Question

我已经按照了几个教程，似乎无法将columnOne和columnTwo div放在一起，而不会让它们重叠。当使用float：left时，文本最终会彼此重叠。

ps：非常感谢任何代码清理建议。我刚开始......

感谢那里的任何帮助！

＆＃13;

body {
  background-color:#666666;
}

h1 {
color: #0c7fcc;
}
   
h2 {
  color: #58abe2;}

h3 {
  color: #7498d3;}

h1, h2, h3 {
        border-style: solid;
        font-family: Georgia, Times, serif;
        border-color: #bfbfbf;            
        width: 700px;}
        
.paraOne, .paraTwo {
 font-family: Arial, Verdana, sans-serif;
  width: 700px;}
.paraOne {
  font-style: italic;
}

＆＃13;

<head>
  <title>Who Am I?</title>
  </head>
  <body>
    
    <h1>Where Am I From?</h1>
    <div class="columnOne">
    <p class="paraOne"> Sometimes a hard question to answer. As a military kid I moved around a lot and never really found a permanent place to call home. I lived in Atlanta the longest, although I live in Manhattan now.</p>
    </div> 
   
   
    <h2> What Do I Do For Fun?</h2>
    <div class="columnTwo">
    <p class="paraTwo">
I like to play music and go hiking. There aren’t as many outdoor places in the city, but whenever I can get out and see nature, I find myself in a better place.
    </div>
</p>
    
    
    
    
    <br>
</br>

<h3>Favorite Foods</h3>
    <ol>
     <li>Pizza</li>
     <li>Cereal</li>
     <li>Pasta</li>
    
    <h3>Places I’d Like to Travel</h3>
    </ol>
    <ul>
      <li>Japan</li>
      <li>Italy</li>
      <li>The Moon</li>
    </ul>

    
    
 <h3>What Are Your Favorite Bands?</h3>    

 <fieldset>
<legend>What Are Your Top Three Music Artists?</legend>
<label>#1<br />
<input type="text" name="one" /></label><select name="genre">
<option value="rock">Rock</option> <option value="country">Country</option> <option value="hiphop">Hip-Hop</option> <option value="pop">Pop</option></select><br /> 
<label>#2<br />
<input type="text" name="two" /></label><select name="genre">
<option value="rock">Rock</option> <option value="country">Country</option> <option value="hiphop">Hip-Hop</option> <option value="pop">Pop</option></select><br /> 
<label>#3<br />
<input type="text" name="three" /></label><select name="genre">
<option value="rock">Rock</option> <option value="country">Country</option> <option value="hiphop">Hip-Hop</option> <option value="pop">Pop</option></select>

<p>

<input type="submit" 
value="Submit" />
    
    </fieldset>
    
    
  
</body>

＆＃13;

Answer 1

使用flexbox。

CSS

.container {
      display:flex;
    }

<强> HTML

<div class="container">
  <div class="columnOne">
    <h1>Where Am I From?</h1>
    <p class="paraOne"> Sometimes a hard question to answer. As a military kid I moved around a lot and never really found a permanent place to call home. I lived in Atlanta the longest, although I live in Manhattan now.</p>
  </div>
  <div class="columnTwo">
  <h2> What Do I Do For Fun?</h2>
    <p class="paraTwo">
      I like to play music and go hiking. There aren’t as many outdoor places in the city, but whenever I can get out and see nature, I find myself in a better place.
  </div>
</div>

Answer 2

您要做的第一件事是确保两列div不是由h1标记分隔，而是文档树中的相邻标记。然后，只需将width:49% and display:inline-block;的大约一半屏幕分配给新的css类twoColumn。

＆＃13;

body {
  background-color:#666666;
}

h1 {
color: #0c7fcc;
}
   
h2 {
  color: #58abe2;}

h3 {
  color: #7498d3;}

h1, h2, h3 {
        border-style: solid;
        font-family: Georgia, Times, serif;
        border-color: #bfbfbf;}

.twoColumn {
        width:49%;
        display:inline-block;}

.paraOne, .paraTwo {
 font-family: Arial, Verdana, sans-serif;}
.paraOne {
  font-style: italic;
}

＆＃13;

<head>
  <title>Who Am I?</title>
  </head>
  <body>
    
    <div class="twoColumn">
    <h1>Where Am I From?</h1>
    <p class="paraOne"> Sometimes a hard question to answer. As a military kid I moved around a lot and never really found a permanent place to call home. I lived in Atlanta the longest, although I live in Manhattan now.</p>
    </div> 
   
    <div class="twoColumn">
    <h2> What Do I Do For Fun?</h2>
    <p class="paraTwo">
I like to play music and go hiking. There aren’t as many outdoor places in the city, but whenever I can get out and see nature, I find myself in a better place.</p>
    </div>
    
    
    
    
    <br>
</br>

<h3>Favorite Foods</h3>
    <ol>
     <li>Pizza</li>
     <li>Cereal</li>
     <li>Pasta</li>
    
    <h3>Places I’d Like to Travel</h3>
    </ol>
    <ul>
      <li>Japan</li>
      <li>Italy</li>
      <li>The Moon</li>
    </ul>

    
    
 <h3>What Are Your Favorite Bands?</h3>    

 <fieldset>
<legend>What Are Your Top Three Music Artists?</legend>
<label>#1<br />
<input type="text" name="one" /></label><select name="genre">
<option value="rock">Rock</option> <option value="country">Country</option> <option value="hiphop">Hip-Hop</option> <option value="pop">Pop</option></select><br /> 
<label>#2<br />
<input type="text" name="two" /></label><select name="genre">
<option value="rock">Rock</option> <option value="country">Country</option> <option value="hiphop">Hip-Hop</option> <option value="pop">Pop</option></select><br /> 
<label>#3<br />
<input type="text" name="three" /></label><select name="genre">
<option value="rock">Rock</option> <option value="country">Country</option> <option value="hiphop">Hip-Hop</option> <option value="pop">Pop</option></select>

<p>

<input type="submit" 
value="Submit" />
    
    </fieldset>
    
    
  
</body>

＆＃13;

Answer 3

为了将这些列并排放置，您需要在这里做一些不同的事情。

<强> HTML

<!-- Remove h1 tags first-->

<div class="columnone">
    <!--HTML tags in here -->
</div>

<div class="columntwo">
    <!-- HTML tags here -->
</div>

<强> CSS：

.columnone, .columntwo {
display:inline-block;
width: 50%;
}

通常，标签的默认显示为“block”，占网页上“行”宽度的100％。使用“display：inline-block”会将标签并排放置，您可以通过编写CSS来指定这些标签的宽度。

希望这些信息有所帮助！

HTML / CSS并排列

3 个答案: