0

我试图将一个元素放在另一个元素上，它看起来像我想要的那样，但问题是元素的位置是硬编码的，正如您在下面的 html 和 css 中看到的那样：

HTML：

<div class="container text-center center">
    <div class="carouselContainer">
        <div id="carousel" class="carousel slide">
            <ol class="carousel-indicators">
                <li data-target="#carousel" data-slide-to="0" class="active"></li>
                <li data-target="#carousel" data-slide-to="1"></li>
                <li data-target="#carousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner text-center">
                <div class="active item">
                    <img src="images/carusel_1.png" />
                </div>
                <div class="item">
                    <img src="images/carusel_2.png" />
                </div>
                <div class="item">
                    <img src="images/carusel_3.png" />
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.container
{
    width: 1084px;
}

.carouselContainer
{
    background-image: url("images/carusel_wrapper.png");
    position: relative;
    top: 0; 
    left: 0;
    width: 1084px;
    height: 430px;

}

.carousel
{
    position: relative;
    width: 930px;
    top: 80px;
    left: 75px;
}

如何通过按百分比设置位置来使其响应。（行星的）内部图像位于框架（带有箭头的框架）的中心图像中。

注意 我正在使用引导程序。 在此处输入图像描述

4

1 回答 1

0

最好的方法是制作所有东西，包括以最大宽度和最大高度为单位的图像大小，以及最小宽度和最小高度来设置特定和合理的界限：最大属性，以便图像不会看起来很糟糕，而且它不会相互倒塌。

之后，您只需将所有内容设置为 % 作为各个位置的值即可。

如果您可以为您的代码提供一个小提琴，我会很乐意用上面的建议编辑我的问题。

于 2013-11-07T15:10:48.070 回答