Question

我的问题是eTextSection1没有移动（这很好），但由于某种原因，当我缩小时，eTextSection2向下移动页面。我怎么能让这个停下来？我已经玩了一段时间，但是我没有运气，所以任何帮助都会受到赞赏。这是网站的实际运作http://www.andrewhnovak.com/test/index1.html

 <div class="container">
        <div class='underHeader'></div>
    </div>

    <div class="container">
        <div class='whiteBox'>
            <div class='newProducts'></div>

            <div class='eTextSection1'>

            <div id="frontPage">
Some Text

                </div>
                <div id="eRow1">
                    Text 1

                    <div id="eRow1Rating">77</div>
                </div>

                <div id="eRow2">
                    Text 2

                    <div id="eRow2Rating">66</div>
                </div>

                <div id="eRow3">
                    Text 3

                    <div id="eRow3Rating">85</div>
                </div>

                <div id="eRow4">
                    Text 4

                    <div id="eRow4Rating">99</div>
                </div>

                <div id="eRow5">
                    Text 5

                    <div id="eRow5Rating">47</div>
                </div>

                <div id="eRow6">
                    Text 6

                    <div id="eRow6Rating">55</div>
                </div>

                <div id="eRow7">
                    Text 7

                    <div id="eRow7Rating">37</div>
                </div>

                <div id="more">
                    <a href="#">Link</a>
                </div>
            </div>

            <div class='eTextSection2'>
                <h3>Title</h3>

                <div id="pRow1">
                    Row Text 1

                    <div id="pRow1Rating">22</div>
                </div>

                <div id="pRow2">
                    Row Text 2

                    <div id="pRow2Rating">66</div>
                </div>

                <div id="pRow3">
                    Row Text 3

                    <div id="pRow3Rating">88</div>
                </div>

                <div id="pRow4">
                    Row Text 4

                    <div id="pRow4Rating">67</div>
                </div>

                <div id="pRow5">
                    Row Text 5

                    <div id="pRow5Rating">98</div>
                </div>

                <div id="pRow6">
                    Row Text 6

                    <div id="pRow6Rating">35</div>
                </div>

                <div id="pRow7">
                    Row Text 7

                    <div id="pRow7Rating">51</div>
                </div>

                <div id="moreLink">
                     <a href="#">Link</a>
                </div>
            </div>
</div>

CSS

.eTextSection1{

        width:240px;
        border-style:solid;
position:relative;

    border-bottom:solid;
        border-width:2px;

        }

        .eTextSection2{

        width:240px;
        border-style:solid;
position:relative;

    border-bottom:solid;
        border-width:2px;
        left:200px;
        bottom:400px;
        }
.whiteBox{
    background-color:white;
    width:800px;
    height:800px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    top:80px;
    -webkit-box-shadow: 10px 11px 5px -6px rgba(0,0,0,0.43);
-moz-box-shadow: 10px 11px 5px -6px rgba(0,0,0,0.43);
box-shadow: 10px 11px 5px -6px rgba(0,0,0,0.43);
margin-bottom:100px;
    }

Answer 1

也许是因为你没有.eTextSection2 {在你的CSS中。

Answer 2

尝试将.eTextSection2上的位置属性设置为position:absolute;

Answer 3

将您的Css更改为此

使用Display：flex;在你的Whitbox课程中

.eTextSection1{

        width:240px;
        border-style:solid;
position:relative;

    border-bottom:solid;
        border-width:2px;

        }

        .eTextSection2{

        width:240px;
        border-style:solid;
position:relative;

    border-bottom:solid;
        border-width:2px;
        left:2px;
        }
.whiteBox{
display:flex;
    background-color:white;
    width:800px;
    height:800px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    top:80px;
    -webkit-box-shadow: 10px 11px 5px -6px rgba(0,0,0,0.43);
-moz-box-shadow: 10px 11px 5px -6px rgba(0,0,0,0.43);
box-shadow: 10px 11px 5px -6px rgba(0,0,0,0.43);
margin-bottom:100px;
    }

Div在缩小时向下移动

3 个答案: