您好我正在建立一个网站，该网站的一部分包含一个FAQ问题的地方。我正在使用bootstrap手风琴样式显示问题然后当点击答案时会弹出。但我也在FAQ部分的右侧显示了一张图片。每当我点击FAQ问题时，答案都会覆盖左侧的图片。我想知道如何约束答案，以便它适合它的div而不是覆盖图片。有一个名为FAQ Question的评论会启动该部分代码。
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> -->
<title>Best Handrails</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<style>
body,html
{
overflow-y: scroll;
overflow-x: hidden;
}
.header_div
{
background-color: #1a1a1a;
}
.header_image1
{
position: relative;
left: 100px;
}
.header_image2
{
position: relative;
left:70px;
}
.header_links
{
position: relative;
left: 600px;
color:white;
font-family: 'Nunito Sans', sans-serif;
}
.main_image
{
position: relative;
width: 100%;
}
.main_image_text
{
font-family: 'Nunito Sans', sans-serif;
color: white;
position: absolute;
top: 200px;
left: 750px;
width: 100%;
}
.the_idea
{
position: relative;
width: 100%;
background-color: #e6e6e6
}
.the_idea_image
{
float: left;
position: relative;
width: 25%;
top: 35px;
left: 100px;
/*border:20px solid #BDB76B;
border-radius: 180px;*/
}
.the_idea_title
{
font-family: 'Nunito Sans', sans-serif;
position: relative;
left: 250px;
}
.the_idea_text_div
{
float:right;
position: relative;
left: 200px;
top: 10px;
width: 75%;
margin-bottom: 10px;
}
.the_idea_text
{
font-family: 'Nunito Sans', sans-serif;
float:left;
position: relative;
left: 0px;
top: 10px;
width: 75%;
}
.quote_div
{
/*width:800px;*/
margin:10 auto;
/*overflow:hidden;*/
float:left;
/*position: relative;
top: 400px;*/
top: 400px;
width: 100%;
background-color: #333333
/*z-index: 0;*/
}
.quote_text
{
width:100%;
float:left;
color:white;
font-family: 'Nunito Sans', sans-serif;
text-align: center;
/*position: absolute;
top: 400px;*/
/* z-index: 1;*/
}
.faq_div
{
float:left;
top:500px;
text-align: center;
background-color: #d9d9d9;
}
.faq_questions
{
font-family: 'Nunito Sans', sans-serif;
color:black;
/*text-align: left;*/
text-align: center;
}
.faq_dropdown
{
text-align: left;
width: 100%;
}
.faq_answer_dropdown
{
width: 50%;
}
.faq_hr
{
color:white;
}
.faq_image_div
{
background-color: #d9d9d9;
float:right;
width: 36.0625%;
height: 939px
}
.faq_image
{
float:right;
position: relative;
/*width: 25%;*/
top: 400px;
right: 60px;
/*left: 200px;*/
border:20px solid #BDB76B;
border-radius: 170px;
}
.gallery_div
{
}
.gallery_info
{
}
</style>
</head>
<body>
<div class="header_div">
<img class="header_image1" src="../image-assets/BestHandRail_Logo_W-01.png" alt="BestHandRail_Logo" style="width:600px;height:150px;">
<img class="header_image2" src="../image-assets/BuyNow_Button-01.png" alt="BuyNow_Button" style="width:300px;height:150px;">
<nav id= "nav_links">
<a class="header_links" href="index.html"> THE IDEA </a>
<a class="header_links" href="index.html"> FAQ </a>
<a class="header_links" href="index.html"> GALLERY </a>
<a class="header_links" href="index.html"> PURCHASE </a>
</nav>
</div>
<div class="main_image">
<img src="../image-assets/20160730_142111.jpg" alt="OldMan" style="width:100%;height:100%;">
<h1 class = "main_image_text "> HELPING <br> SENIORS <br> STAY <br> SAFE. </h1>
</div>
<div class="the_idea">
<div class="the_idea_image">
<img src="../image-assets/ALL.jpg" alt="All" class="img-circle" style="width:320px;height:340px;">
</div>
<div class="the_idea_text_div">
<h2 class="the_idea_title"> THE IDEA </h2>
<p class ="the_idea_text"> One Sunday afternoon as we were walking into the house after church, I realized my wife needed something to help her navigate the steps from our garage into our house. Monday morning found me searching in vain across the internet and through U.S. Patents. It became obvious that what my wife required did not exist. As a matter of fact, nothing like I imagined existed. So, I invented the Best Handrail and submitted my design with the necessary patent forms and received notification of patent-pending within a couple weeks.<br> <br> Now, the Best Handrail—the perfect solution for my wife—is available for everyone from besthandrail.com. The Best Handrail will help you and your loved ones navigate entry steps and other recessed or elevated living spaces, inside and outside your home. I know members of your family will benefit from the stability provided by the Best Handrail, just as my wife does. <br> <br>The Best Handrail could be the best solution for navigation, entry and improved mobility in your home. You’ll soon wonder how you ever got along without it. <br> <br> <strong>Purchase yours today.</strong> With our overnight shipping option, you can enjoy the benefits of your Best Handrail tomorrow. <br> <br> </p>
</div>
</div>
<div class="quote_div">
<hr>
<div class="quote_text">
<h2> MY HANDRAIL HAS MADE LIFE <br> I FEEL SAFER THAN I HAVE IN YEARS! <br> –MABEL BROWN, AGE 96 </h2>
<hr>
</div>
</div>
<!-- FAQ Section -->
<div class="faq_div">
<h2 class="faq_questions"> FAQ </h2>
<div class="faq_questions faq_dropdown">
<div class="container faq_dropdown" >
<div class="panel-group faq_answer_dropdown" >
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Will THE BEST HANDRAIL help me if I have difficulty going up or down steps?</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Will THE BEST HANDRAIL improve my mobility?</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Enim pulvinar vehicula ut magna. Nullam semper quisque pede at ut massa, sed lorem porta, etiam et dis enim vivamus posuere mi, eleifend quam per duis, faucibus vitae quam. Augue vivamus sed pellentesque ligula. Neque arcu minus euismod cras eget rutrum, sit eget nascetur, suscipit eleifend accumsan nullam nulla consectetuer cursus. Massa facilisi eu auctor interdum. Pellentesque enim dictumst justo nullam. Mauris tellus rhoncus fringilla, ut feugiat. Ridiculus est porta nulla. Purus quisque neque est amet quis. Quam at. Ut a urna donec gravida consequatur, sed tristique imperdiet nam at sit turpis.</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse3">Can THE BEST HANDRAIL be installed where there are changes in doorway elevation—a tripping hazard?</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Fusce vitae ultrices vivamus, mauris metus integer dolor tortor et, pharetra sapien curae, vestibulum ultrices velit arcu risus. Et turpis adipiscing, morbi aliquam, condimentum mauris, lacinia luctus, scelerisque justo justo massa vitae. Magna donec, faucibus in sem pede lectus sed duis, ipsum proin a urna orci dolor. Euismod lorem penatibus sed fringilla nec. Cursus erat, consectetuer quam neque sed aliquet phasellus libero, nibh adipiscing consequat ante nec torquent aliquam, libero risus tempor ornare.</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse4">Will THE BEST HANDRAIL provide safer passage through challenging spaces?</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">Lorem lacinia dolor, pede turpis lacus vel egestas mauris. Risus nec posuere varius vivamus, nullam pellentesque sem lacus. Ad nostra qui, et purus, volutpat sed, eu id mauris venenatis sapien venenatis, dolor etiam varius. In leo eget vestibulum tortor, hendrerit diam, ut quis. Sapien enim consectetuer dictum lectus, nec magna.</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse5">Will THE BEST HANDRAIL provide safer passage through challenging spaces?</a>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">Elit amet massa, ligula sapien neque lobortis donec vel. Odio justo a, quisque habitasse vel velit ligula interdum, vestibulum egestas aliquam nulla odio vitae. Nam luctus mauris id a sollicitudin sem. Placerat amet nibh sodales diam, ac sed pellentesque purus arcu amet urna, lobortis porta cras. Et elit amet turpis aliquam commodo, odio faucibus leo quam at nec, lorem nullam fermentum, duis eros suscipit sem imperdiet nam sem, quis fermentum molestie nec.</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse6">It THE BEST HANDRAIL easy to install?</a>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">Vestibulum adipiscing. Nullam diam et nonummy venenatis adipiscing imperdiet, lectus condimentum eget, wisi morbi, nulla scelerisque, lorem lacus a mus a. Semper dolor, pellentesque sed ipsum natoque vehicula purus. Cum dui at pede nec amet. In neque nibh praesent wisi, lectus porttitor arcu nulla, cras felis molestie adipiscing dolor lobortis sem. Libero integer in, vel urna faucibus.</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse7">Are they different models of THE BEST HANDRAIL?</a>
</h4>
</div>
<div id="collapse7" class="panel-collapse collapse">
<div class="panel-body">Lorem lacinia dolor, pede turpis lacus vel egestas mauris. Risus nec posuere varius vivamus, nullam pellentesque sem lacus. Ad nostra qui, et purus, volutpat sed, eu id mauris venenatis sapien venenatis, dolor etiam varius. In leo eget vestibulum tortor, hendrerit diam, ut quis. Sapien enim consectetuer dictum lectus, nec magna.</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse8">How many colors of besthandrail.com are there?</a>
</h4>
</div>
<div id="collapse8" class="panel-collapse collapse">
<div class="panel-body">THE BEST HANDRAIL comes in four different colors or finishes: <br>
Flat Midnight Black (durable flat black) <br>
Victorian White (sun-bleached white-gray) <br>
Statuary Bronze (satin-finished blackened bronze) <br>
Brick Brown (rich brown with textured finish).</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse9">How much does besthandrail.com cost?</a>
</h4>
</div>
<div id="collapse9" class="panel-collapse collapse">
<div class="panel-body">Lorem lacinia dolor, pede turpis lacus vel egestas mauris. Risus nec posuere varius vivamus, nullam pellentesque sem lacus. Ad nostra qui, et purus, volutpat sed, eu id mauris venenatis sapien venenatis, dolor etiam varius. In leo eget vestibulum tortor, hendrerit diam, ut quis. Sapien enim consectetuer dictum lectus, nec magna..</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse10">How do I order THE BEST HANDRAIL?</a>
</h4>
</div>
<div id="collapse10" class="panel-collapse collapse">
<div class="panel-body">Lorem lacinia dolor, pede turpis lacus vel egestas mauris. Risus nec posuere varius vivamus, nullam pellentesque sem lacus. Ad nostra qui, et purus, volutpat sed, eu id mauris venenatis sapien venenatis, dolor etiam varius. In leo eget vestibulum tortor, hendrerit diam, ut quis. Sapien enim consectetuer dictum lectus, nec magna..</div>
</div>
</div>
</div>
<hr class="faq_hr">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse11">How will THE BEST HANDRAIL shipped to me?</a>
</h4>
</div>
<div id="collapse11" class="panel-collapse collapse">
<div class="panel-body">Lorem lacinia dolor, pede turpis lacus vel egestas mauris. Risus nec posuere varius vivamus, nullam pellentesque sem lacus. Ad nostra qui, et purus, volutpat sed, eu id mauris venenatis sapien venenatis, dolor etiam varius. In leo eget vestibulum tortor, hendrerit diam, ut quis. Sapien enim consectetuer dictum lectus, nec magna..</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Image next to FAQ -->
<div class="faq_image_div">
<div class="faq_image">
<img src="../image-assets/ALL.jpg" alt="All" class="img-circle" style="width:300px;height:300px;">
</div>
</div>
<!-- Carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../image-assets/Brown.jpg" alt="..." style="width:300px;height:300px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="../image-assets/White.jpg" alt="..." style="width:300px;height:300px;">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
答案 0 :(得分：1)
设置 faq_div 的宽度 例如：
.faq_div{
width:500px
}
或
.faq_div{
width:40%
}