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元素的predone模板，但我无法发现任何会干扰的内容。

我缺少什么想法？我知道网站看起来很糟糕并且有问题，但它仍处于早期开发阶段。

由于

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

Div不是彼此相邻的

4 个答案: