Fatal编程技术网
  • html/
  • Html 容器div没有显示边框，加上左、右div没有完整的背景颜色覆盖

Html 容器div没有显示边框，加上左、右div没有完整的背景颜色覆盖

html css

Html 容器div没有显示边框，加上左、右div没有完整的背景颜色覆盖,html,css,border,Html,Css,Border,我有一个容器div，里面有一个左右列div。 问题是container1中的左、右div使container1没有边界，并且conainer1s bg颜色仅在右、左div大小内存在。例如：如果右分区的宽度为45%，左分区的宽度为50%，则container1的背景在最后5%的宽度内不会显示 只需使用container1而不使用左边框和右边框，就可以只保留底部边框 我需要所有的左，右和底部的边界是目前和bg颜色的集装箱1，以涵盖100% 下一个问题是，我做了一个小提琴，我无法重现这个问题，这意味着

我有一个容器div，里面有一个左右列div。 问题是container1中的左、右div使container1没有边界，并且conainer1s bg颜色仅在右、左div大小内存在。例如：如果右分区的宽度为45%，左分区的宽度为50%，则container1的背景在最后5%的宽度内不会显示

只需使用container1而不使用左边框和右边框，就可以只保留底部边框

我需要所有的左，右和底部的边界是目前和bg颜色的集装箱1，以涵盖100%

下一个问题是，我做了一个小提琴，我无法重现这个问题，这意味着我的代码中的某些内容与此相冲突。然而，我不希望任何人通过我的整个代码寻找答案，而是建议任何出现在脑海中的可能是冲突的东西

这把小提琴没有问题


身体{
背景色：#b0c4de；
} 
.集装箱1{
宽度：100%；
边框：5px实心#006699；
背景：#0A3D5D；
浮动：左；
垫底：4px；
垫面：4px；
右边填充：0px；
左侧填充：4px；
明确：两者皆有；
边框右下半径：8px；
边框左下半径：8px；
边框右上半径：无；
边框左上半径：无；
}
.左栏1{
宽度：95%；
浮动：左；
垫底：8px；
}
.右栏1{
宽度：95%；
浮动：左；
左侧填充：2px；
垫底：8px；
}
@仅介质屏幕和（最小宽度：400px）{
.左栏1{
浮动：左；
宽度：50%；}
}
.右栏1{
浮动：左；
宽度：48%；
}
}
.集装箱{
宽度：100%；
}
在这里，您可以在页面右侧看到工作中的问题：

现在看看这项工作，我认为你的问题解决了：

正文{
背景色：#b0c4de；
} 
.集装箱1{
宽度：80%；
边框：5px实心#006699；
背景：#0A3D5D；
浮动：左；
垫底：4px；
垫面：4px；
右边填充：0px；
左侧填充：4px；
边框右下半径：8px；
边框左下半径：8px；
边框右上半径：无；
边框左上半径：无；
}
.左栏1{
宽度：95%；
浮动：左；
垫底：8px；
}
.右栏1{
宽度：95%；
浮动：左；
左侧填充：2px；
垫底：8px；
}
@仅介质屏幕和（最小宽度：400px）{
.左栏1{
浮动：左；
宽度：50%；}
}
.右栏1{
浮动：左；
宽度：48%；
}
}
.集装箱{
宽度：100%；
}
尝试将
DOCTYPE
更改为：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
致：
你是在追求还是我误解了你的问题

边框显示在每一面（第二张图片显示底部边框），容器1占据了页面的100%。
抱歉，没有足够的代表上传图片。

我需要container1为100%：）有人吗？当这个问题持续存在时，我的网站看起来很糟糕。只要看看我的网站页面（不是小提琴），希望编辑能有所帮助。如果这就是你要找的，让我知道！另外，我可以帮助你使两个容器占据100%（）更多的墙纸和广告，例如，不要像follow us那样在容器周围有边框。同样，follow us background占据了整个容器，但更多的墙和广告以及容器中具有左栏和右栏的任何其他内容都不会占据整个容器。我需要大的来占据整个集装箱，边界也要显示出来。这有意义吗？嘿，是的，我在这里。好的，现在我明白了，在右列的一些div中有两个div。。。这很重要，因为我不明白我们在谈论这些。现在，我想（喜欢分享？）和（关注我们）哪些部门有问题？好吧，这是最新的壁纸，更多的壁纸，facebook页面和赚钱的页面。因为它们都是同一个容器，所以都会遇到问题。现在有趣的是，我遇到了一个问题，很多图片没有出现在firefox和chrome桌面上，但它们却出现在我的手机上。我的合作伙伴chrome手机浏览器只缺少c1-c5图像，只显示边界半径轮廓。我不知道发生了什么，但这让我有点疯狂 
body {
    background-color: #b0c4de;
} 

.container1 {
width: 80%;
border: 5px solid #006699;
background:#0A3D5D;
float:left;
padding-bottom:4px;
padding-top:4px;
padding-right:0px;
padding-left:4px;

border-bottom-right-radius:8px;
border-bottom-left-radius:8px;
border-top-right-radius:none;
border-top-left-radius:none;
}
.left-column1 {
width: 95%;
float:left;
padding-bottom:8px;


}
.right-column1 {

width:95%;
float:left;

padding-left:2px;
padding-bottom:8px;
}

@media only screen and (min-width:400px) {
.left-column1 {
float:left;
width: 50%;}


}
.right-column1 {
float:left;
width: 48%;
}

}

.container {
width: 100%;

}

<div class = "container1">

<div class="left-column1">

<img src="http://placehold.it/150x150">
    </div>
    <div class="right-column1">
<img src="http://placehold.it/150x150">   
</div></div>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<!DOCTYPE html>