做出反应，布局不漂浮？ [英] Making responsive, layout no floating?

问题描述

我正在尝试制作响应式布局，但对我来说不太合适。我在顶部有两个元素，我需要第一个左侧浮动和第二个右侧，但我似乎没有得到良好的对齐。

$ b $所以我的第一个问题是，我怎样才能在大屏幕和小屏幕上获得良好的对齐。

第二个问题是为什么我在小屏幕的菜单上获得滚动条，以及如何防止它？

这是我的代码：

 < div class =容器> 
< div class =Top> 
< nav class =pull-left> 
< div class =container-fluid> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-target =＃navbararia-expanded =falsearia-controls =navbar> ; < span class =sr-only>切换导航< / span> 
 ds 
 
< / button> 
< / div> 
< div id =navbarclass =navbar-collapse collapse> 
< ul class =nav navbar-nav> 
< li class =active>< a href =＃> STARTSIDA< / a> 
 
< / li> 
< li>< a href =＃> VER VERKSAMHET< / a> 
 
< / li> 
< li>< a href =＃> REFERENSER< / a> 
 
< / li> 
< li>< a href =＃> KUNDER< / a> 
 
< / li> 
< li>< a href =＃> OM OSS< / a> 
 
< / li> 
< li>< a href =＃> KONTAKT< / a> 
 
< / li> 
< / ul> 
< / div> 
<！ -  /。nav-collapse  - > 
< / div> 
<！ -  /。container-fluid  - > 
< / nav> 
< div class =Logo pull-right> < span class =fa fa-cogs>< / span> 
< span class =Header> Strand< span> maskin< / span> .com< / span> 
< / div> 
< / div> 
< / div> 
  

http://jsfiddle.net/ws60rp9w/

如果你们，你们中的任何一个人都有提示在哪里学习响应式im很乐意接受所有的建议。

解决方案

如果您希望top元素左右移动，请检查以下内容：

 <！DOCTYPE html> 
< html lang =en> 
< head> 
< meta charset =UTF-8> 
< title>文档< / title> 
< / head> 
< body> 
< style> 
 * {
 margin：0; 
 padding：0; 
 border：0; 
} 
 .container {
最大宽度：100％; 
} 
 .container .top-element-left {
 max-width：45％; 
 background-color：skyblue; 
 float：left; 
} 
 .top-element-right {
 background-color：skyblue; 
最大宽度：45％; 
 float：right; 
} 
< / style> 
< div class =container> 
< div class =top-element-left> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Ad facilis quae nihil perspiciatis atque impedit et，eius，quidem consequatur fugit。< / div> 
< div class =top-element-right> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Ut laudantium，minus nobis vel dignissimos inventore？< / div> 
 
< / div> 
< / body> 
< / html> 
  

以及响应网页开发的建议：我建议您开始使用susy。对我来说，使用CSS时，生活从未如此简单，直到我偶然发现嫌疑

I'm trying to make responsive layout, but it's not going to well for me. I got two elements at the top, i need the first on the be floated left and the second one to the right, but i dont seem to get a good align on both of them.

So my first question is, how can i get a good align on them both on large screen and small screen.

And second question is why do i get a scrollbar on the menu in the small screen and how to prevent it?

This is my code:

<div class="container">
    <div class="Top">
        <nav class="pull-left">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
 ds

                    </button>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">STARTSIDA</a>

                        </li>
                        <li><a href="#">VÅR VERKSAMHET</a>

                        </li>
                        <li><a href="#">REFERENSER</a>

                        </li>
                        <li><a href="#">KUNDER</a>

                        </li>
                        <li><a href="#">OM OSS</a>

                        </li>
                        <li><a href="#">KONTAKT</a>

                        </li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
            <!--/.container-fluid -->
        </nav>
        <div class="Logo pull-right">   <span class="fa fa-cogs"></span>
    <span class="Header">Strand<span>maskin</span>.com</span>
        </div>
    </div>
</div>

http://jsfiddle.net/ws60rp9w/

And if you guys, anyone of you have tips on where to learn responsive im gladly taking all advices.

解决方案

if you want top element to go left and right, then check following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <style>
       *{
           margin: 0;
           padding: 0;
           border: 0;
       }
       .container{
           max-width: 100%;
       }
       .container .top-element-left {
           max-width: 45%;
           background-color: skyblue;
           float: left;
       }
       .top-element-right {
           background-color: skyblue;
           max-width: 45%;
           float: right;
       }
    </style>
    <div class="container">
        <div class="top-element-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad facilis quae nihil perspiciatis atque impedit et, eius, quidem consequatur fugit.</div>
        <div class="top-element-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut laudantium, minus nobis vel dignissimos inventore?</div>

    </div>
</body>
</html>

and for suggestion for responsive web development: I would suggest you to start using susy. For me life had never been easier when working with css until I stumbled at susy

这篇关于做出反应，布局不漂浮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！