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要素は、共通の親を持つことを除いて、実際にはまったく関連していないため、一方の要素の幅をもう一方の要素とまったく同じに設定するのは難しいと思います。 1つの要素を他の要素の中に配置します。

簡単なjQueryの修正は次のようになります：

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

それはあなたが望むものではありませんか？http://jsfiddle.net/HgGjW/

于 2012-04-09T16:43:35.833 に答える
0

わかりました、私はこのソリューションと数週間格闘し、4 か月の大部分を微調整してきました。基本的に、私は JQuery を使用してその上に留まり、2 つの要素が同じ幅であることを確認します。

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

そのようにすると、divは使用せず、リストを使用します。

于 2012-04-09T17:13:59.260 に答える
-1

It is possible to do it with pure CSS. Set both element's width as 100%.

于 2012-04-09T16:13:59.953 に答える