gpt4 book ai didi

HTML/CSS 并排列

转载 作者:行者123 更新时间:2023-11-28 01:53:47 24 4
gpt4 key购买 nike

我已经学习了几个教程,但似乎无法将 columnOne 和 columnTwo div 放在一起而不让它们重叠。当使用 float: left 时,文本刚好在另一个之上。

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

感谢大家的帮助!

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;
}
<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>

最佳答案

您要做的第一件事是确保两列 div 没有被 h1 标记分隔,而是文档树中的相邻标记。然后,简单地为每个大约一半的屏幕分配 width:49% 和 display:inline-block; 一个新的 css 类 twoColumn

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;
}
<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>

关于HTML/CSS 并排列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49764324/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com