1

考虑以下标记：

<div id="container">
    <div id="top">
        <img />
    </div>
    <div id="bottom">
        Some text, there we go.
    </div>
</div>

<img>有固定的高度。top和的宽度bottom是动态的。top的内容可能比bottom' 的内容更宽，反之亦然。我需要使bottom' 的宽度始终等于top' 的宽度。

这可以用纯 CSS 完成吗？还是需要JS？

4

6 回答 6

1

有一种方法可以通过纯 CSS 实现（由 Artem Polikarpov 提供（俄语））

<style>
  .ap-pic {
    display: table-cell;
    width: 1px;
  }

  .ap-pic .caption {
    display: block;
  }
</style>

<div class="ap-pic">
  <img src="pic.jpg">
  <span class="caption">long text that has to go on the next line blah blah blah</span>
</div>
于 2012-10-08T07:20:04.977 回答
0

#top 和 #bottom 元素实际上并没有任何关系，除了有一个共同的父元素，所以我认为你在将一个元素的宽度设置为与另一个元素完全相同时会遇到一些麻烦，除非您将一个元素放在另一个元素中，等等。

一个快速的 jQuery 修复将是：

$("#bottom").css('width', $("#top").width());
于 2012-04-09T16:17:50.110 回答
0

这不是你想要的吗？http://jsfiddle.net/HgGjW/

于 2012-04-09T16:43:35.833 回答
0

好的，我已经与这个解决方案斗争了几个星期，并在四个月的大部分时间里对其进行了微调。本质上，我使用 JQuery 来控制它并确保无论什么两个元素都是相同的宽度。

JSFiddle

/**
 * Determine basic dimensions of an element
 *  @author PseudoNinja (email at pseudoninja dot com)
 * @returns object
 */

jQuery.fn.getDimensions = function () {
    var $this = $(this),
        dimensions = {
            width: 0,
            paddingLeft: 0,
            paddingRight: 0,
            borderLeft: 0,
            borderRight: 0,
            getOuterWidth: function () {
                return parseInt(this.width) + parseInt(this.paddingLeft) + parseInt(this.paddingRight) + parseInt(this.borderLeft) + parseInt(this.borderRight);
            }
        };

    dimensions.width = $this.width();
    dimensions.paddingLeft = $this.css('padding-left').replace(/[^-\d\.]/g, '');
    dimensions.paddingRight = $this.css('padding-right').replace(/[^-\d\.]/g, '');
    dimensions.borderLeft = $this.css('border-left-width').replace(/[^-\d\.]/g, '');
    dimensions.borderRight = $this.css('border-right-width').replace(/[^-\d\.]/g, '');
    dimensions.outerWidth = $this.outerWidth();

    return dimensions;
};

/** size element to width if target
 *  @author PseudoNinja (email at pseudoninja dot com)
 *  @param  {string} target - selector of element to clone width
 */
jQuery.fn.sizeTo = function (target) {
    var $this = $(this),
        $target = $(target),
        myDimensions = $this.getDimensions(),
        targetDimensions = $target.getDimensions(),
        difference = targetDimensions.outerWidth - myDimensions.outerWidth,
        adjOuterWidth = 0
    ;

    if (difference > 0) {
        myDimensions.width = myDimensions.width + difference;
        adjOuterWidth = myDimensions.getOuterWidth();
        $this.width(myDimensions.width);
    }

    // Add persistance to size change
    setTimeout(function () {
        $this.sizeTo(target);
    }, 100);

    return $this;
};

// USAGE EXAMPLE
//    $(function(){
//        $("#div1").sizeTo($("#div2"));
//    });
于 2014-11-25T16:01:55.910 回答
-1

可以使用纯 CSS 来实现。将两个元素的宽度设置为 100%。

于 2012-04-09T16:13:59.953 回答
-1

如果你这样做，那么我不会使用 div，我会使用列表。

于 2012-04-09T17:13:59.260 回答