CSS错误，在拉伸窗口时div超出了边框
当我调整顺序时，我的第二个div延伸到很远的地方。有谁知道是什么导致了这一切？我想这和我的网格有关，不确定。也许我用%作为宽度。不管怎么说，我想你能看出我在想什么。我希望第二个“通过联系我们”在右边，所有其他内容在左边CSS错误，在拉伸窗口时div超出了边框,css,html,Css,Html,当我调整顺序时，我的第二个div延伸到很远的地方。有谁知道是什么导致了这一切？我想这和我的网格有关，不确定。也许我用%作为宽度。不管怎么说，我想你能看出我在想什么。我希望第二个“通过联系我们”在右边，所有其他内容在左边 <style> body { font-family: 'Oswald', sans-serif; } input { border-radius: 25px; margin-top: 7%; padding: 6p
<style>
body {
font-family: 'Oswald', sans-serif;
}
input {
border-radius: 25px;
margin-top: 7%;
padding: 6px 30px 6px 10%;
border: 2px solid black;
}
textarea {
border: 2px solid black;
color: solid black;
}
#contactHeader {
text-align: center;
margin-bottom: 2%;
font-size: 50px;
}
.contact {
margin: 0 auto;
margin-top: 5%;
justify-content: center;
background-color: #00B4E8;
padding: 2%;
max-width: 70%;
border-radius: 20px;
margin-bottom: 5%;
border: 2px solid black;
}
.contactInfo {
display: grid;
grid-template-columns: auto auto;
color: solid black;
margin: 0 auto;
margin-top: 5%;
margin-left: 15%;
margin-right: 15%;
}
.contactTxt1 {
display: flex;
flex-direction: column;
}
.contactTxt2 {
border: 3px solid black;
min-width: 70%;
padding: 2%;
margin-left: 10%;
background-color: white;
border-radius: 15px;
font-size: 12px;
margin-right: 100%;
}
.RadioButtons {
display: flex;
flex-direction: row;
margin: 15px 0 10px 15px;
font-weight: 600;
}
.member {
margin-left: 10px;
margin-right: 25px;
margin-top: 7px;
}
.contactTxt2Header {
margin-top: 10px;
}
.contactStuff {
font-size: 15px;
}
.ContactBox {
background-color: solid black;
}
.SubmitButton {
display: flex;
flex-direction: column;
}
.submit {
background-color: green;
border: 2px solid white;
color: white;
border-radius: 25px;
width: 75%;
padding: 6px 12px;
margin: 0 auto;
font-size: 20px;
text-align: center;
}
::placeholder {
color: black;
}
@media only screen and (max-width: 600px) {
.top1 {
margin-bottom: 2%;
}
.search {
margin-right: 10%;
}
.SearchBar {
height: 20px;
}
.contact {
max-width: 97%;
width: 97%;
}
.contactInfo {
margin-left: 5%;
margin-right: 5%;
display: flex;
flex-direction: column;
margin-right: 15%;
}
.ContactBox {
width: 90%;
}
.contactTxt2 {
border: 2px solid black;
padding: 2%;
margin-left: 10%;
background-color: white;
border-radius: 15px;
font-size: 12px;
width: auto;
margin: 0 auto;
margin-top: 2%;
}
.contactHeader {
font-size: 18px;
}
}
</style>
<html>
<div class="navigations">
<div class="buttonNav">
<a href="index.html"><button class="siteButton" type="onclick"
name="button">Home</button></a>
</div>
<div class="buttonNav">
<a href="about.html"><button class="siteButton" type="onclick"
name="button">About</button></a>
</div>
<div class="buttonNav">
<a href="contact.html"> <button class="siteButton" type="onclick"
name="button">Contact</button></a>
</div>
<div class="buttonNav">
<a href="exhibition.html"><button class="siteButton" type="onclick"
name="button">Exhibition</button></a>
</div>
<div class="buttonNav">
<a href="learn.html"><button class="siteButton" type="onclick"
name="button">Learn</button></a>
</div>
<div class="buttonNav">
<a href="shop.html"><button class="siteButton" type="onclick"
name="button">Shop</button></a>
</div>
</div>
<div class="contact">
<h1 id="contactHeader">Contact</h1>
<div class="contactInfo">
<form action="youHaveAnswered.php" method="post">
<div class="contactTxt1">
<input class="ContactBox" type="text" name="fname" placeholder="First and
Middle Name"></input>
<input class="ContactBox" type="text" name="lname" placeholder="Last Name">
</input>
<input class="ContactBox" type="email" name="email" placeholder="Email
Adress"></input>
<div class="RadioButtons">
Member:<input class="member" type="radio" name="member" value="member">
Non-Member:<input class="member" type="radio" name="non-member" value="non-
member">
</div>
<div class="text">
<textarea name="name" rows="20" cols="40" placeholder="Tell us what you're
wondering about"></textarea>
</div>
<div class="SubmitButton">
<button class="submit" type="submit" name="button">Send</button>
</div>
</div>
</form>
<div class="contactTxt2">
<h1 class="contactHeader">You could also contact us through</h1>
<h2 class="contactTxt2Header">Phone Number</h2>
<span class="contactStuff">1-603-413-4124</span>
<h2 class="contactTxt2Header">Email</h2>
<span class="contactStuff">SweeneyTodd@FleetStreet.com</span>
<h2 class="contactTxt2Header">Address</h2>
<span class="contactStuff">221b Baker St, London, Britain</span>
<h2 class="contactTxt2Header">We can recieve calls from</h2>
<span class="contactStuff">07:00AM - 04:00PM</span>
</div>
</div>
</div>
</html>
身体{
字体系列：“Oswald”，无衬线；
}
输入{
边界半径：25px；
利润率最高：7%；
填充：6px 30px 6px 10%；
边框：2件纯黑；
}
文本区{
边框：2件纯黑；
颜色：纯黑；
}
#通讯头{
文本对齐：居中；
利润底部：2%；
字体大小：50px；
}
.联系方式{
保证金：0自动；
利润率最高：5%；
证明内容：中心；
背景色：#00B4E8；
填充：2%；
最大宽度：70%；
边界半径：20px；
利润底部：5%；
边框：2件纯黑；
}
.联系方式{
显示：网格；
网格模板列：自动；
颜色：纯黑；
保证金：0自动；
利润率最高：5%；
左边距：15%；
右边距：15%；
}
.联系方式TXT1{
显示器：flex；
弯曲方向：立柱；
}
.contactTxt2{
边框：3倍纯黑；
最小宽度：70%；
填充：2%；
左边距：10%；
背景色：白色；
边界半径：15px；
字体大小：12px；
保证金权利：100%；
}
.单选按钮{
显示器：flex；
弯曲方向：行；
利润率：15px 0 10px 15px；
字号：600；
}
.成员{
左边距：10px；
右边距：25px；
边缘顶部：7px；
}
.contactTxt2Header{
边缘顶部：10px；
}
.联系人{
字体大小：15px；
}
.通讯盒{
背景色：纯黑；
}
.提交按钮{
显示器：flex；
弯曲方向：立柱；
}
.提交{
背景颜色：绿色；
边框：2倍纯白；
颜色：白色；
边界半径：25px；
宽度：75%；
填充：6px 12px；
保证金：0自动；
字体大小：20px；
文本对齐：居中；
}
：：占位符{
颜色：黑色；
}
@仅介质屏幕和（最大宽度：600px）{
.top1{
利润底部：2%；
}
.搜索{
保证金权利：10%；
}
.搜索栏{
高度：20px；
}
.联系方式{
最大宽度：97%；
宽度：97%；
}
.联系方式{
左缘：5%；
保证金权利：5%；
显示器：flex；
弯曲方向：立柱；
右边距：15%；
}
.通讯盒{
宽度：90%；
}
.contactTxt2{
边框：2件纯黑；
填充：2%；
左边距：10%；
背景色：白色；
边界半径：15px；
字体大小：12px；
宽度：自动；
保证金：0自动；
利润率最高：2%；
}
.contactHeader{
字号：18px；
}
}
接触
成员:
非成员：
发送
您也可以通过以下方式与我们联系：
电话号码
1-603-413-4124
电子邮件
SweeneyTodd@FleetStreet.com
地址
英国伦敦贝克街221b号
我们可以接到来自中国的电话
上午7:00-下午4:00
.contactTxt2{
margin-right: 100%;
}