Html 根据是否存在其他元素更改div的宽度
我有两个并列的浮动div。我的左分区占分配空间的30%，右分区占65%。然而，我的网站是由CMS提供动力的，当左div中没有内容时，它就不会显示在浏览器中。这使得我只有一个65%的div和它旁边的一些空白，看起来有点不好看。如果没有显示30%的div，是否有一种直接的HTML/CSS2方法来指示我的65%div占用分配的全部空间，或者这是否必然涉及jQuery和其他类似的解决方案 这是我的 HTMLHtml 根据是否存在其他元素更改div的宽度,html,css,width,Html,Css,Width,我有两个并列的浮动div。我的左分区占分配空间的30%，右分区占65%。然而，我的网站是由CMS提供动力的，当左div中没有内容时，它就不会显示在浏览器中。这使得我只有一个65%的div和它旁边的一些空白，看起来有点不好看。如果没有显示30%的div，是否有一种直接的HTML/CSS2方法来指示我的65%div占用分配的全部空间，或者这是否必然涉及jQuery和其他类似的解决方案 这是我的 HTML 您可以尝试以下方法： .container .right { float: left;
您可以尝试以下方法：
.container .right
{
float: left;
min-width: 65%;
width: auto;
background: #c00;
}
（未经测试）解决方案可以使用JavaScript，因为您无法仅通过使用CSS来决定在何处应用样式 下面是一个简单的例子： 代码检查类
左侧的div
元素是否存在，如果不存在，则向右侧元素添加一个带有css宽度：100%
的类特殊
在这个例子中，我用left
类注释掉了divs，可能您的CMS希望添加到最终的HTML中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p
{
padding: 10px;
}
.container
{
overflow: auto;
font-family: Arial, sans-serif;
color: #fff;
margin-bottom: 20px;
}
.container .left
{
float: left;
width: 30%;
margin-right: 5%;
background: #555;
}
.container .right
{
float: left;
width: 65%;
background: #c00;
}
.special {
width: 100% !important;
}
</style>
<script>
window.app = {
start: function(){
var left = document.querySelectorAll('.left');
if(left.length === 0) {
var right = document.querySelectorAll('.right');
for(var i = 0; i < right.length; i++) {
elm = right[i].classList.add('special');
}
}
}
};
</script>
</head>
<body onload="app.start();">
<div class="container">
<!--div class="left">
<p>Content on the left</p>
</div>-->
<div class="right">
<p>Content on the right</p>
</div>
</div>
<div class="container">
<div class="right">
<p>When there is only content in the right div, it needs to have a width value of 100%.</p>
</div>
</div>
<div class="container">
<!--<div class="left">
<p>Content on the left</p>
</div>-->
<div class="right">
<p>Content on the right</p>
</div>
</div>
</body>
</html>
P
{
填充：10px；
}
.集装箱
{
溢出：自动；
字体系列：Arial，无衬线；
颜色：#fff；
边缘底部：20px；
}
.集装箱，左
{
浮动：左；
宽度：30%；
保证金权利：5%；
背景:#555；
}
.集装箱，对
{
浮动：左；
宽度：65%；
背景：#c00；
}
.特别的{
宽度：100%！重要；
}
window.app={
开始：函数（）{
var left=document.querySelectorAll（'.left'）；
if（left.length==0）{
var right=document.querySelectorAll（'.right'）；
对于（变量i=0；i
当右div中只有内容时，它需要具有100%的宽度值
右边的内容
javascript是最简单的方法，例如：
<script>
if(document.getElementById('YOURID').style.BackgroundColor=='red'){
document.getElementById('IDOFTHEDIVTOCHANGE').style.width='300px';
}
</script>
if（document.getElementById（'YOURID'）.style.BackgroundColor=='red'）{
document.getElementById（'IDOFTHEDIVTOCHANGE'）.style.width='300px'；
}
答案是CSS无法决定这一点，您需要使用服务器端语言或js应用类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p
{
padding: 10px;
}
.container
{
overflow: auto;
font-family: Arial, sans-serif;
color: #fff;
margin-bottom: 20px;
}
.container .left
{
float: left;
width: 30%;
margin-right: 5%;
background: #555;
}
.container .right
{
float: left;
width: 65%;
background: #c00;
}
.special {
width: 100% !important;
}
</style>
<script>
window.app = {
start: function(){
var left = document.querySelectorAll('.left');
if(left.length === 0) {
var right = document.querySelectorAll('.right');
for(var i = 0; i < right.length; i++) {
elm = right[i].classList.add('special');
}
}
}
};
</script>
</head>
<body onload="app.start();">
<div class="container">
<!--div class="left">
<p>Content on the left</p>
</div>-->
<div class="right">
<p>Content on the right</p>
</div>
</div>
<div class="container">
<div class="right">
<p>When there is only content in the right div, it needs to have a width value of 100%.</p>
</div>
</div>
<div class="container">
<!--<div class="left">
<p>Content on the left</p>
</div>-->
<div class="right">
<p>Content on the right</p>
</div>
</div>
</body>
</html>
<script>
if(document.getElementById('YOURID').style.BackgroundColor=='red'){
document.getElementById('IDOFTHEDIVTOCHANGE').style.width='300px';
}
</script>