2

在下面的 HTML 中，我只想指定 div 的宽度.left，.right否则.wrapper它应该取全宽。例如，如果有.rightdiv，那么它的宽度.left应该是300px，否则应该是500px。

我认为这可以使用 css+选择器来完成，但如果我不确定如何在.left.

<div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
</div>

.wrapper{
    width: 500px;
}

.left{
    width: 300px;
}

.right{
    width: 200px;
}
4

4 回答 4

7

您可以使用 :only-child 选择器

.left:only-child
{
  width: 100%;
}

例子

如果您不想使用 :only-child 选择器，可以尝试以下操作

.wrapper
{
  width: 500px;
  min-height: 50px;
}

.left {
    overflow: hidden;
    min-height: 50px;
    border: 1px dashed #f00;
}

.right {
    float: right;
    width: 200px;
    min-height: 50px;
    border: 1px dashed #00f;
}

例子

于 2013-01-07T08:57:25.190 回答
3

与其使用 CSS，为什么不使用 HTML 文件呢？

从您的问题来看，您似乎有不同的 HMTL 文件/输出。如果您在 HTML 文件中添加不同的类，您可以直接在 CSS 中定位它们：

<div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
</div>

和

<div class="wrapper">
    <div class="full"></div>
</div>

您的 CSS 将包含如下内容：

.wrapper {
    width: 500px;
}

.left {
    width: 300px;
}

.right {
    width: 200px;
}

.full {
    /* Whatever is required for full width */
}

这样方便多了！（假设您可以更改 HTML 文件/输出）

于 2013-01-07T08:48:17.517 回答
1

如果您控制 HTML 输出，我也会选择 Veger 的解决方案。如果不是，则+选择器仅适用于后一个元素，因此如果左 div 存在，.left + .right您可以更改右 div 。反过来也行不通。

如果您知道，您将始终有一个左 div，您可以将右 div 放入左 div 并让它以 200px 的宽度向右浮动。

于 2013-01-07T08:52:03.890 回答
1

CSS无法检测元素是否存在，它只是用于元素的呈现。

但是，您可以使用 javascript 来执行此操作。我将向您展示它的 jQuery 版本：

你有一个元素：

<div id="one">
  My diiiv.
</div>

如果这个元素存在，你想做点什么：

$.fn.exists = function(callback) {
  var args = [].slice.call(arguments, 1);

  if (this.length) {
    callback.call(this, args);
  }
  return this;
};

这是一个函数，它将在调用元素时确定元素是否存在。

您现在可以做的是测试是否存在任何元素：

$('div#one').exists(function() {
  this.append('<p>I exist!</p>');
});

因此，如果是这样，您可以以任何您想要的方式扩充 DOM。CSS 无法做到这一点，这就是 javascript 及其库的用途:)

http://jsfiddle.net/5Q2Gm/

于 2013-01-07T08:54:14.380 回答