潛水員不要緊挨着

Question

我在為正在制作的網站設置容器時遇到了麻煩。 我已經定義了側邊欄容器的寬度，但是當我在其中測試文本時，它會向下推動主體，而不是坐在其旁邊。

我的代碼如下

<div id="sidebar">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis urna at tristique tincidunt. Etiam ut cursus elit. Donec hendrerit turpis urna, ac pretium enim tincidunt nec. Donec ut mauris convallis odio vehicula dapibus ut id ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus a eleifend magna. Suspendisse potenti. Morbi ac ante vel sapien bibendum lacinia eu et nulla. Nunc aliquam nunc quis sem sollicitudin ultricies. Sed ultricies ornare nisi accumsan pharetra. Suspendisse elit arcu, sagittis vel bibendum eget, sollicitudin vel ipsum. Nam feugiat dolor tellus, sit amet adipiscing dui imperdiet at. Morbi facilisis non orci sit amet placerat. Nunc arcu elit, tincidunt vel est sit amet, fringilla porttitor leo. Nunc pharetra tellus vitae convallis elementum.<br>
        Quisque tristique nunc semper feugiat lacinia. Cras eu nunc commodo, auctor augue sed, pellentesque nisi. Duis ut sapien non metus venenatis porta vitae ac turpis. Suspendisse et fringilla magna. Quisque tempus tortor metus, quis eleifend elit interdum mollis. Nullam porta tincidunt magna sed ullamcorper. In luctus purus at fermentum posuere. Donec pellentesque lectus lorem, at tempus turpis iaculis ac. Sed in eros vitae augue adipiscing vehicula. Vivamus arcu odio, cursus nec magna rhoncus, eleifend ornare sem.<br></p>
</div>
<div class="container">
        <p class="body">
            Everything Blinds is a ‘come-to-you’ blinds service operating on-site, so you don’t have to worry about the inconvenience of having your blinds taken away. As professional blind specialists, we have years of experience - we know how to fix and clean all makes and models, and our in-depth knowledge of blinds can help you choose the right new blind for your home. <br>
            We aim for quality customer service by providing:
        </p>
        <ul>
            <li>Free quotes for cleaning, repairing and installing old and new blinds</li>
            <li>Most jobs can be easily quoted over the phone</li>
            <li>Premium quality blinds at competitive prices</li>
            <li>Onsite, on-the-day cleaning and repairing</li>
            <li>Wide variety of Australian-made blinds</li>
            <li>Reliable and friendly service</li>              
        </ul>           
</div>

#sidebar {width: 20%;margin-left: 10%;}
.container {width: 60%; margin-left: 30%; margin-right: 10%;}

您可以在www.dweeman.com/eb/sitetemplate.html上看到它的運行情況

我為導航菜單使用了一個預先定義的模板，該模板包含一些CSS元素，但是我看不到任何會干擾的內容。

有什么想法我想念的嗎？ 我知道該網站看起來很糟糕並且有問題，但是它仍處於早期開發中。

謝謝

Answer 1

如下所述更新您的HTML和CSS：

HTML：

<div style="float: left">
        <div id="sidebar">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis urna at tristique tincidunt. Etiam ut cursus elit. Donec hendrerit turpis urna, ac pretium enim tincidunt nec. Donec ut mauris convallis odio vehicula dapibus ut id ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus a eleifend magna. Suspendisse potenti. Morbi ac ante vel sapien bibendum lacinia eu et nulla. Nunc aliquam nunc quis sem sollicitudin ultricies. Sed ultricies ornare nisi accumsan pharetra. Suspendisse elit arcu, sagittis vel bibendum eget, sollicitudin vel ipsum. Nam feugiat dolor tellus, sit amet adipiscing dui imperdiet at. Morbi facilisis non orci sit amet placerat. Nunc arcu elit, tincidunt vel est sit amet, fringilla porttitor leo. Nunc pharetra tellus vitae convallis elementum.<br>
                Quisque tristique nunc semper feugiat lacinia. Cras eu nunc commodo, auctor augue sed, pellentesque nisi. Duis ut sapien non metus venenatis porta vitae ac turpis. Suspendisse et fringilla magna. Quisque tempus tortor metus, quis eleifend elit interdum mollis. Nullam porta tincidunt magna sed ullamcorper. In luctus purus at fermentum posuere. Donec pellentesque lectus lorem, at tempus turpis iaculis ac. Sed in eros vitae augue adipiscing vehicula. Vivamus arcu odio, cursus nec magna rhoncus, eleifend ornare sem.<br>
            </p>
        </div>
        <div class="container">
            <p class="body">
                Everything Blinds is a ‘come-to-you’ blinds service operating on-site, so you don’t have to worry about the inconvenience of having your blinds taken away. As professional blind specialists, we have years of experience - we know how to fix and clean all makes and models, and our in-depth knowledge of blinds can help you choose the right new blind for your home.
            <br>
                We aim for quality customer service by providing:
            </p>
            <ul>
                <li>Free quotes for cleaning, repairing and installing old and new blinds</li>
                <li>Most jobs can be easily quoted over the phone</li>
                <li>Premium quality blinds at competitive prices</li>
                <li>Onsite, on-the-day cleaning and repairing</li>
                <li>Wide variety of Australian-made blinds</li>
                <li>Reliable and friendly service</li>
            </ul>
        </div>
    </div>

CSS：

#sidebar {
    width: 20%;
    margin-left: 10%;
    float: left;
}

.container {
    width: 60%;
    float: left;
    padding-left: 15px;
    word-break: break-all;
}

Answer 2

嘗試添加這種樣式的overflow-wrap: break-word;

Answer 3

您需要做的只是添加float：left; 到側邊欄：

#sidebar { 
    width: 20%;
    margin-left: 10%;
    float: left;
}

Answer 4

您應該使用浮點數。 嘗試將其添加到側邊欄和容器中。

#sidebar: {
float:left;
width: "";
height:auto;
}

和

#container {
float:left;
width:"";
}

只要確保用實數值填充寬度=）

另外，請確保您的FTP連接正確。 我看不到您頁面上的任何浮動仍= P