所以我网页的最后一部分就像一个接触部分-左边有一些文本和表格,我在右边添加了一个联系表单,但是当我将其浮动到右边时,它就离开了该部分,变成空白。有人可以帮忙弄清楚我的错误在哪里吗?我已经在下面留下了CSS和HTML。
.sayHello {
width: 100%;
height: 600px;
background-color: #99ccff;
}
.sayHello div {
margin: 0px 27% 0px 27%;
}
.sayHello p {
padding-top: 40px;
color: snow;
font-family: 'Montserrat', sans-serif;
font-size: 50px;
}
.sayHello h3 {
color: snow;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
width: 65%;
text-align: left;
float: left;
}
.sayHello table {
float: left;
border-spacing: 20px;
color: snow;
position: relative;
bottom: 20px;
overflow: hidden;
}
.sayHelloTable img {
width: 30px;
height: 30px;
border: 2px solid black;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
padding: 3px;
background-color: snow;
}
.sayHelloTable td {
color: snow;
}
.contactForm {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
float: right;
width: 200px;
height: 300px;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
<section class="sayHello">
<div>
<p>Say <b>Hello</b></p>
<br>
<h3>Don't be shy, drop us an e-mail and say hello! We are a really nice
bunch of people. :)</h3>
</div>
<table class="sayHelloTable">
<tr>
<td><img src="phone.png"></td>
<td>(416)555-0000</td>
<td><img src="e-mail-logo.png"></td>
<td>hello@adeveloping.com</td>
</tr>
<tr>
<td><img src="twitter.png"></td>
<td>@NAKATA</td>
<td><img src="facebook.png"></td>
<td>@NAKATA</td>
</tr>
<tr>
<td><img src="80-google-plus-512.png"></td>
<td>naskuuu123@gmail.com</td>
<td><img src="pinterest-logo-E994F3A9FB-seeklogo.com.png"></td>
<td>/NAKATA</td>
</tr>
</table>
<div class="contactForm">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"> </textarea>
<input type="submit" value="Submit">
</form>
</div>
</section>
答案 0 :(得分:0)
希望此代码对您有所帮助:
.sayHello {
width: 100%;
height: 600px;
background-color: #99ccff;
}
.sayHello .title-wrap {
margin: 0px 27% 0px 27%;
}
.sayHello p {
padding-top: 40px;
color: snow;
font-family: 'Montserrat', sans-serif;
font-size: 50px;
}
.sayHello h3 {
color: snow;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
width: 65%;
text-align: left;
float: left;
}
.contact-wrap {
display: inline-block;
width: 100%;;
}
.sayHello table {
float: left;
border-spacing: 20px;
color: snow;
position: relative;
bottom: 20px;
overflow: hidden;
width: calc(100% - 250px);
}
.sayHelloTable img {
width: 30px;
height: 30px;
border: 2px solid black;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
padding: 3px;
background-color: snow;
}
.sayHelloTable td {
color: snow;
}
.contactForm {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
float: right;
width: 200px;
height: 300px;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
<section class="sayHello">
<div class="title-wrap">
<p>Say <b>Hello</b></p>
<br>
<h3>Don't be shy, drop us an e-mail and say hello! We are a really nice
bunch of people. :)</h3>
</div>
<div class="contact-wrap">
<table class="sayHelloTable">
<tr>
<td><img src="phone.png"></td>
<td>(416)555-0000</td>
<td><img src="e-mail-logo.png"></td>
<td>hello@adeveloping.com</td>
</tr>
<tr>
<td><img src="twitter.png"></td>
<td>@NAKATA</td>
<td><img src="facebook.png"></td>
<td>@NAKATA</td>
</tr>
<tr>
<td><img src="80-google-plus-512.png"></td>
<td>naskuuu123@gmail.com</td>
<td><img src="pinterest-logo-E994F3A9FB-seeklogo.com.png"></td>
<td>/NAKATA</td>
</tr>
</table>
<div class="contactForm">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"> </textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</section>
答案 1 :(得分:0)
您的主容器的高度为600px,这就是为什么最后一个子元素不在此部分中的原因。尝试像这样将高度增加到1000px:
.sayHello {
width: 100%;
height: 1000px;
background-color: #99ccff;
}
.sayHello div {
margin: 0px 27% 0px 27%;
}
.sayHello p {
padding-top: 40px;
color: snow;
font-family: 'Montserrat', sans-serif;
font-size: 50px;
}
.sayHello h3 {
color: snow;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
width: 65%;
text-align: left;
float: left;
}
.sayHello table {
float: left;
border-spacing: 20px;
color: snow;
position: relative;
bottom: 20px;
overflow: hidden;
}
.sayHelloTable img {
width: 30px;
height: 30px;
border: 2px solid black;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
padding: 3px;
background-color: snow;
}
.sayHelloTable td {
color: snow;
}
.contactForm {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
float: right;
width: 200px;
height: 300px;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
<section class="sayHello">
<div>
<p>Say <b>Hello</b></p>
<br>
<h3>Don't be shy, drop us an e-mail and say hello! We are a really nice
bunch of people. :)</h3>
</div>
<table class="sayHelloTable">
<tr>
<td><img src="phone.png"></td>
<td>(416)555-0000</td>
<td><img src="e-mail-logo.png"></td>
<td>hello@adeveloping.com</td>
</tr>
<tr>
<td><img src="twitter.png"></td>
<td>@NAKATA</td>
<td><img src="facebook.png"></td>
<td>@NAKATA</td>
</tr>
<tr>
<td><img src="80-google-plus-512.png"></td>
<td>naskuuu123@gmail.com</td>
<td><img src="pinterest-logo-E994F3A9FB-seeklogo.com.png"></td>
<td>/NAKATA</td>
</tr>
</table>
<div class="contactForm">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"> </textarea>
<input type="submit" value="Submit">
</form>
</div>
</section>