不能给我的div，宽度100％
This is the site I am working on
我的网站分为3个部分，标题，内容和页脚。
在内容div中，我有不同的sub-div。最后两个div，名为contactsales和latestnews，不想拉伸我的屏幕宽度，即使我指定div为宽度：100％;
可能是什么问题，我一遍又一遍地检查了我的代码，但似乎无法发现我的错误
这是我的内容div的CSS：
#content{
width: 100%;
}
#content #rowCopy{
width: 80%;
margin: 0 auto;
display: block;
}
#content #services{
width: 80%;
margin: 0 auto;
display: block;
}
#content #rowCopy #box {
background: none repeat scroll 0 0 white;
box-shadow: 3px 3px 17px -1px rgba(0, 0, 0, 0.82);
margin: 10px;
padding:0;
top: -50px;
}
#content #rowCopy #box #innercontent {
width:75%;
margin: 0 auto;
}
.col-sm-3 {
width: 22%;
min-width: 230px;
}
.col-md-4{
width: 30%;
min-width: 230px;
}
#content #services #box {
background: none repeat scroll 0 0 white;
box-shadow: 3px 3px 17px -1px rgba(0, 0, 0, 0.82);
margin: 10px;
padding:0;
}
#content #contactsales {
background-color: rgb( 242, 242, 242 );
left: 0px;
width: 100%;
height: 91px;
}
#content #contactsales #inner {
width: 80%;
margin: 0 auto;
}
#content #latestnews{
background: url("../images/blurimg.jpg");
height: 574px;
width: 100%;
}
#content #latestnews #title{
color: rgba(200,200,200,0.7);
font-size: 30px;
font-style: bold;
padding-top: 50px;
padding-bottom: 50px;
}
#content #latestnews #inner{
width: 80%;
margin: 0 auto;
}
#content #latestnews #inner #box{
background: none repeat scroll 0 0 white;
box-shadow: 3px 3px 17px -1px rgba(0, 0, 0, 0.82);
margin: 10px;
padding:0;
}
#content #latestnews #inner #box #innercontent{
padding: 15px;
}
#content #latestnews #inner #box #innercontent h4{
font-weight: bold;
}
#content #latestnews #inner #box #news{
padding: 10px;
border: solid 1px;
border-color: rgb(220,220,220);
}
#content #latestnews #inner #box #news h5{
font-weight: bold;
}
HTML在我这里包含它的时间相当长
非常感谢帮助！
5 个答案:
答案 0 :(得分：1)
这是因为两者都占据了parent分配的宽度的100％。
他们的直接父母是#services，它使用其CSS定义的80％的网页宽度。
改变这个：
#content #services {
width: 80%;
margin: 0 auto;
display: block;
}
到此：
#content #services {
margin: 0 auto;
display: block;
}
目前的结构：
您的代码的第306行有语法错误：
<div style="clear:both"/>
改为：<div style="clear:both"> </div>
div 标记应始终具有明确匹配的结束标记。
这将从 #services
中分离 #contactsales 和 #newslatest答案 1 :(得分：1)
这是因为contactsales和latestnews div存在于div id="services width: 80%内<div id="services>。
所以要么移除width: 100%之外的两个div，要么#services div给#content #services {
width: 100%;
margin: 0 auto;
display: block;
}
，即
//Get selected value
var selected = $( "#country option:selected" ).text();
//Then pass to control
var controlCountry = $("#<%=controlId.ClientID%>");
controlCountry.val = selected;
见截图：
答案 2 :(得分：1)
因为您的最后2个div位于div = services的div中。如果您希望最后2个div是全宽，则应将其移出div#services。您可以将div移动到它下方的页脚div。
答案 3 :(得分：1)
当您在CSS中使用高度和宽度的百分比时，这意味着您需要例如80％的参考宽度，即父级的宽度。这里有 #service 作为 #contactsales 和 #latestnews 的父级。
#service parent是 #content 。 #service 宽度是 #content 的80％，而#contactsales和#latestnews是他们父母的100％。也是#content的80％。
如果您不想移动#contactsales和#latestnews，您应该使用someclass包装它们并使用 position：absolute 更改该类引用宽度，并设置 position：relative ＃content.Now这两个Ides认为#content是他们的父母。 但我不建议使用position：absolute，只需从#service
移动它们
.wrapperclass{
position : absolute;
width: 100%;
left: 0;
}
#content{
position: relative;
width:100%;
left:0;
}
#content #contactsales{
width:100%;
background-color:red;
height:40px;
position:relative
}
#content #latestnews{
width:100%;
background-color:green;
position:relative;
height:40px
}
#service{
width:80%;
margin:0 auto;
background-color: yellow;
height:120px;
}<div id="content">
<div id="service">
<div class="wrapperclass">
<div id="contactsales"></div>
<div id="latestnews"></div>
</div>
</div>
</div>
答案 4 :(得分：1)
将div＃内容替换为以下代码。
<div id="content">
<div id="slider">
<div id="slider1_container" style="position: relative; margin: 0px auto; top: -7px; left: 0px; width: 1350px; height: 633.461538461539px; overflow: hidden;" jssor-slider="true">
<!-- Slides Container -->
<!--#region Bullet Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
<!-- bullet navigator container -->
<!--#endregion Bullet Navigator Skin End -->
<!--#region Arrow Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html -->
<!-- Arrow Left -->
<!-- Arrow Right -->
<!--#endregion Arrow Navigator Skin End -->
<div style="position: absolute; top: 0px; left: 0px; width: 1300px; height: 610px; transform-origin: 0px 0px 0px; transform: scale(1.03846153846154);"><div class="" style="position: relative; margin: 0px auto; top: 0px; left: 0px; width: 1300px; height: 610px; overflow: visible; display: block;"><div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px; height: 610px; overflow: hidden; z-index: 0;"><div debug-id="slide_container" style="position: absolute; z-index: 0; pointer-events: none; left: 0px; top: 0px;"></div></div><div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px; height: 610px; overflow: hidden; z-index: 0;" debug-id="slide-board"><div style="width: 1300px; height: 610px; top: 0px; left: 0px; position: absolute; opacity: 0; display: none; background-color: rgb(0, 0, 0);"></div>
<div debug-id="slide-0" style="width: 1300px; height: 610px; top: 0px; left: 0px; position: absolute; overflow: hidden;"><img u="image" src="./images/image.jpg" border="0" style="width: 1500px; height: 610px; top: 0px; left: -100px; position: absolute;"><div style="width: 1300px; height: 610px; top: 0px; left: 0px; z-index: 1000; display: none;"></div></div>
<div debug-id="slide-1" style="width: 1300px; height: 610px; top: 0px; left: 1300px; position: absolute; overflow: hidden;"><img u="image" src="./images/image.jpg" border="0" style="width: 1500px; height: 610px; top: 0px; left: -100px; position: absolute;"><div style="width: 1300px; height: 610px; top: 0px; left: 0px; z-index: 1000; display: none;"></div></div>
<div debug-id="slide-2" style="width: 1300px; height: 610px; top: 0px; left: -1300px; position: absolute; overflow: hidden;"><img u="image" src="./images/image.jpg" border="0" style="width: 1500px; height: 610px; top: 0px; left: -100px; position: absolute;"><div style="width: 1300px; height: 610px; top: 0px; left: 0px; z-index: 1000; display: none;"></div></div>
</div><style>
/* jssor slider bullet navigator skin 21 css */
/*
.jssorb21 div (normal)
.jssorb21 div:hover (normal mouseover)
.jssorb21 .av (active)
.jssorb21 .av:hover (active mouseover)
.jssorb21 .dn (mousedown)
*/
.jssorb21 {
position: absolute;
}
.jssorb21 div, .jssorb21 div:hover, .jssorb21 .av {
position: absolute;
/* size of bullet elment */
width: 19px;
height: 19px;
text-align: center;
line-height: 19px;
color: white;
font-size: 12px;
background: url(./images/bullets.png) no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb21 div { background-position: -5px -5px; }
.jssorb21 div:hover, .jssorb21 .av:hover { background-position: -35px -5px; }
.jssorb21 .av { background-position: -65px -5px; }
.jssorb21 .dn, .jssorb21 .dn:hover { background-position: -95px -5px; }
</style><div u="navigator" class="jssorb21" style="bottom: 26px; right: 6px; width: 73px; height: 19px; left: 613.5px;">
<!-- bullet navigator item prototype -->
<div u="prototype" class="av" style="position: absolute; left: 0px; top: 0px;"></div><div u="prototype" class="" style="position: absolute; left: 27px; top: 0px;"></div><div u="prototype" class="" style="position: absolute; left: 54px; top: 0px;"></div></div><style>
/* jssor slider arrow navigator skin 21 css */
/*
.jssora21l (normal)
.jssora21r (normal)
.jssora21l:hover (normal mouseover)
.jssora21r:hover (normal mouseover)
.jssora21l.jssora21ldn (mousedown)
.jssora21r.jssora21rdn (mousedown)
*/
.jssora21l, .jssora21r {
display: block;
position: absolute;
/* size of arrow element */
width: 55px;
height: 55px;
cursor: pointer;
background: url(./images/arrows.png) center center no-repeat;
overflow: hidden;
}
.jssora21l { background-position: -3px -33px; }
.jssora21r { background-position: -63px -33px; }
.jssora21l:hover { background-position: -123px -33px; }
.jssora21r:hover { background-position: -183px -33px; }
.jssora21l.jssora21ldn { background-position: -243px -33px; }
.jssora21r.jssora21rdn { background-position: -303px -33px; }
</style><span u="arrowleft" class="jssora21l" style="top: 277.5px; left: 8px; display: none;">
</span><span u="arrowright" class="jssora21r" style="top: 277.5px; right: 8px; display: none;">
</span><a style="display: none" href="http://www.jssor.com">Image Slider</a></div></div></div>
</div>
<div id="rowCopy">
<div class="col-xs-5 col-sm-3" id="box">
<div id="innercontent">
<h3>WELCOME TO FORTREX</h3>
<p>
But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain was born and I will give you a complete count of the system, and expound the actual teaings of the great explorer idea announcing. But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain
</p><p>
<a href="#">MORE ABOUT US ❱</a>
</p></div>
</div>
<div class="col-xs-5 col-sm-3" id="box"><img width="100%" src="./images/datamanagement.jpg">
<div id="innercontent">
<h3>DATA MANAGEMENT</h3>
<p>
But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain was born and I will give you a complete count of the system, and expound the actual teaings of the great explorer idea announcing. But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain
</p><p>
<a href="#">READ MORE ❱</a>
</p></div>
</div>
<div class="col-xs-5 col-sm-3" id="box"><img width="100%" src="./images/storageservices.jpg">
<div id="innercontent">
<h3>STORAGE SERVICES</h3>
<p>
But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain was born and I will give you a complete count of the system, and expound the actual teaings of the great explorer idea announcing. But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain
</p><p>
<a href="#">READ MORE ❱</a>
</p></div>
</div>
<div class="col-xs-5 col-sm-3" id="box"><img width="100%" src="./images/aviationstorage.jpg">
<div id="innercontent">
<h3>AVIATION STORAGE</h3>
<p>
But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain was born and I will give you a complete count of the system, and expound the actual teaings of the great explorer idea announcing. But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain
</p><p>
<a href="#">READ MORE ❱</a>
</p></div>
</div>
</div>
<div style="clear:both"></div>
<div id="services">
<div class="col-md-4" style="padding: 0;"><h1>OUR SERVICES</h1></div>
<div class="col-md-8" style="padding: 0; padding-top: 20px;"><hr></div>
<div style="clear:both"></div>
<div class="col-md-4" id="box">
<div id="inner">
<div class="col-md-4"><h5 style="font-weight: bold;">PACKAGING AND STORAGE</h5>
<p>But I must explain to you how all this mistakn idea of </p>
</div>
<div class="col-md-2" style="padding: 10px;"><img src="./images/packaging.jpg"></div>
</div>
</div>
<div class="col-md-4" id="box">
<div class="col-md-4"><h5 style="font-weight: bold;">TRANSPORT</h5>
<p>But I must explain to you how all this mistakn idea of </p>
</div>
<div class="col-md-2" style="padding: 10px;"><img src="./images/trans.jpg"></div>
</div>
<div class="col-md-4" id="box">
<div class="col-md-4"><h5 style="font-weight: bold;">WORLDWIDE TRANSPORT</h5>
<p>But I must explain to you how all this mistakn idea of </p>
</div>
<div class="col-md-2" style="padding: 10px;"><img src="./images/globtrans.jpg"></div>
</div>
<div style="clear:both">
<div class="col-md-4" id="box">
<div class="col-md-4"><h5 style="font-weight: bold;">WAREHOUSING</h5>
<p>But I must explain to you how all this mistakn idea of </p>
</div>
<div class="col-md-2" style="padding: 10px;"><img src="./images/warehousing.jpg"></div>
</div>
<div class="col-md-4" id="box">
<div class="col-md-4"><h5 style="font-weight: bold;">DOOR-TO-DOOR DELIVERY</h5>
<p>But I must explain to you how all this mistakn idea of </p>
</div>
<div class="col-md-2" style="padding: 10px;"><img src="./images/delivery.jpg"></div>
</div>
<div class="col-md-4" id="box">
<div class="col-md-4"><h5 style="font-weight: bold;">GROUND TRANSPORT</h5>
<p>But I must explain to you how all this mistakn idea of </p>
</div>
<div class="col-md-2" style="padding: 10px;"><img src="./images/groundtrans.jpg"></div>
</div>
</div>
<div style="clear:both; padding:20px;"></div>
</div>
<div id="contactsales">
<div id="inner">
<div class="col-md-8" style="top: 35px; font-size: 20px;">Not Sure which Solution fits your buiness needs?</div>
<div class="col-md-4" style="top: 20px;"><a href="#"><img src="./images/contactsales.jpg"></a></div>
</div>
</div>
<div id="latestnews">
<div id="inner">
<div id="title">
LATEST NEWS
</div>
<div class="col-md-4" id="box">
<img width="100%" src="./images/example1.jpg">
<div id="innercontent">
<h4>NEW PREMISES INAUGURATED BY JOSEPH MUSCAT PRIME MINISTER OF MALTA</h4>
<p>By Ryan it-Triplex</p>
</div>
</div>
<div class="col-md-4" id="box">
<img width="100%" src="./images/example2.jpg">
<div id="innercontent">
<h4>THE FIRST AVIATION ‘FORTRESS’ in MALTA OPENS</h4>
<p>By Ryan it-Triplex</p>
</div>
</div>
<div class="col-md-4" id="box">
<div id="news">
<h5>NEW PREMISES INAUGURATED BY JOSEPH MUSCAT PRIME MINISTER OF MALTA</h5>
<p>By Ryan it-Triplex</p>
</div>
<div id="news" style="background: rgb(240,240,240)">
<h5>THE FIRST AVIATION ‘FORTRESS’ in MALTA OPENS</h5>
<p>By Ryan it-Triplex</p>
</div>
<div id="news">
<h5>THE FIRST AVIATION ‘FORTRESS’ in MALTA OPENS</h5>
<p>By Ryan it-Triplex</p>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
我所做的是将#contactsales和#latestnews移出#services并放在#services旁边。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？