使用 CSS 定位 HTML答案

【问题标题】：Positioning HTML using CSS使用 CSS 定位 HTML
【发布时间】：2015-11-26 22:23:20
【问题描述】：

我仍然难以使用 CSS 定位 HTML 元素。我了解基础知识，元素主要显示为块或内联；但是，当涉及到实际编码网站时，我会感到困惑。我在下面包含了我的 HTML 编码，我对此非常满意。我现在开始使用 CSS 设置代码样式。我想在页面顶部创建一个导航栏；为此，我使用了 CSS 编码（也在下方）。

首先，我将列表显示为内联块。其次，我将我的标题向左浮动，我的列表向右浮动，这一切看起来都很好。我的困惑是为什么我的班级“滑块”会在这两个元素之间向上移动？

我非常感谢一个解决方案，但更重要的是，如果您能解释实际理论和功能来解释为什么会发生这种情况，我将不胜感激。我自己的理论是，通过浮动这两个元素，它们已经从页面的“正常”流程中移除，允许页面上的下一个元素移动到留下的空白空间？同样，我希望有一个解决方案，但更多的是我想自己了解它背后的理论，这样我以后就可以自己解决类似的问题了。

<style>
.nav li {
   display: inline-block;
  }

.nav ul {
   float: right;
  }

.nav h1 {
   float: left;
  } 

</style>

    <div class="nav">
            <h1>Resume</h1>
        <ul>
            <li>Home</li>
            <li>Portfolio</li>
            <li>Skills</li>
            <li>Experience</li>
            <li>Contact</li>
        </ul>
       </div>
    </div>


    <div class="slider">
        <h2>Andrew Hardiman</h2>
        <p>Webdesigner & Developer</p>
        <p>Read More</p>
        <p>HTML</P>
        <p>css</P>
        <h3>I design and develop amazing websites that are sleek, easy-to-navigate and exiting to use.</h3>
        <p>Work with us to plan your digital marketing mix and achieve better results online.</p>
       </div>
    </div>



    <div class="Portfolio">
       <div class="container">
        <h3>Portfolio</h3>
        <img src="https://download.unsplash.com/photo-1423655156442-ccc11daa4e99">
        <h3>Client</h3>
        <h4>JPMorgan</h4>
        <h3>Role in Project</h3>
        <h4>Project Lead</h4>
        <h3>Project Included</h3>
        <h4>Mobile and Web Interface</h4>
       </div>
    </div>


    <div class="skills">
       <div class="container">
        <h3>Skills</h3>
        <p>I am a bit of a hybrid Web Developer and like to utilise my skills both front and back end as well
        as keep in touch with my creative side designing websites</p>
        <p>html</P>
        <p>CSS</p>
        <p>JavaScript</p>
        <p>jQuery</P>
       </div>
    </div>


    <div class="Experience">
       <div class="container">
        <h3>Experience</h3>
        <h4>Work Experience</h4>
        <p>Blah blah blah, professional with this and that<p>
        <h5>Royal National Lifeboat Institution</h5>
        <p>Coastal Support Officer, blah blah blah<p>
        <h5>Pioneer Business Systems</h5>
        <p>blah d, blah d, blah</p>
        <h5>JPMorgan Chase</h5>
        <p>Some more blah d, blah</p>
       </div>
    </div>


    <div class="wrap">
       <div class="container">
        <img src="https://download.unsplash.com/photo-1424296308064-1eead03d1ad9">
        <h3>Andrew Hardiman</h3>
        <p>I have worked for one of the top Investment Banks in the world (JPMorgan) and loved
        every minute of it!</p>
        <p>Today, I have left the world of high-finance to fulfil my curiosity in the freelance
        arena which has been amazing so far and I can't think of why I did not taken the plunge sooner</p>
       </div>
    </div>


    <div class="contact">
       <div class="container">
        <div id="Username"></div>
        <div id="Email"></div>
        <div id="Cost or your project"></div>
        <div id="Timeline"></div>

        <h4>LOCATION</h4>
        <p>Flat 1, 29 Markham Road, Bournemouth, BH9 1HZ</p>

        <h4>I AM SOCIAL</h4>
            <ul>    
            <li>Facebook</li>
            <li>Twitter</li>
            <li>Google+</li>
            <li>Linkedin</li>
            <li>Flickr</li>
            </ul>

        <div class="Send>   
            <a href="#">Send</a>
        </div>

       </div>
    </div>


    <div class="location">
    </div>


    <div class="top-footer">

       <div class="footer-menu">
        <h4>Menu</h4>
        <ul>
        <li>Home</li>
        <li>Portfolio</li>
        <li>Skills</li>
        <li>Experience</li>
        <li>Contact</li>
        </UL>   
       </div>


       <div class="footer-archives">
        <h4>Archives</h4>
        <ul>
        <li>March 2014</li>
        <li>April 2014</li>
        <li>May 2014</li>
        <li>June 2014</li>
        <li>July</li>
        </ul>
       </div>


       <div class="widget">
        <p>Not really sure what this is for, you'll need to find out</p>
       </div>


       <div class="follows">
        <h4>Follows</h4>
        <ul>
        <li><a href="#"></li>
        <li><a href="#"></li>
        <li><a href="#"></li>
        <ul>
       </div>



    <div class="footer-bottom">
        <P>© 2015 Website by Andrew Hardiman</p>
    </div>

【问题讨论】：

去阅读alistapart.com/article/css-positioning-101

标签： html css

【解决方案1】：

快速回答： 就像其他人提到的那样，您需要清除浮动。

.nav { 
clear: both; 
overflow: auto; }

您可以在fork of your jsfiddle 中看到它的实际效果。（P.S. 你的 HTML 中有一些语法错误，我在上面链接的 fork 中修复了这些错误。主要是缺少或缺少 / 的结束标签。）

更多解释： 您在 DIV.nav 中有 2 个子元素，它们都是浮动的，但由于这些元素不会填满整个空间，因此 DIV.nav 下方的任何内容都会开始向上填充以填补任何空白。

我还强烈建议您查看 SitePoint 或 A List Apart 等网站上的初学者文章。希望对您有所帮助。

【讨论】：

【解决方案2】：

你需要清除你的浮动，这样它就不会影响任何后续的 div。将此添加到您的 css 文件中。

.slider{
    clear:both;
}

当您向左或向右浮动元素时，它会创建空白空间，从而允许其他元素占用这些空间。清除浮动将阻止这些元素占用这个空白空间。

或者你可以修复影响元素

.nav{
    overflow:hidden;
}

JSFiddle Demo

【讨论】：

也可以，但是使用这种方法，这种行为将在另一个页面上再次发生（没有滑块的地方）。最好的办法是修复令人不安的 div 本身，而不是周围的那些。

【解决方案3】：

解决方案 1：

您可以像这样简单地清除滑块：

.slider{
    clear:both;
}

但要回答您的问题，为什么您的 .slider 介于您的 ul 和您的 h1 之间。由于 floated 的两个元素的宽度没有占据父容器宽度的 100%，因此 .slider 有足够的空间在它们之间流动。这就是为什么将clear:both 添加到您的.slider 类是必要的。

jsFiddle

解决方案 2：

需要考虑的事项。由于您不是通过div 付款，因此您可以随意将它们用作容器。将它们的宽度设置为 100% 并在其中添加您的元素。你可以很容易地做这样的事情来解决你的问题。

<div class="row">
    <ul>
        <li>Home</li>
        <li>Portfolio</li>
        <li>Skills</li>
        <li>Experience</li>
        <li>Contact</li>
    </ul>
</div>

然后给 .row 这些样式：

.row {
    display: inline-block; /* or display: block;* display: table; */
    width:100%;
    clear:both;
}

这将确保没有其他元素进入这个空间。

这里有一个解决方案：

jsFiddle

解决 cmets 中的问题：

请阅读 CSS-Tricks 中的this article

div {
  display: inline;        /* Default of all elements, unless UA stylesheet overrides */
  display: inline-block;  /* Characteristics of block, but sits on a line */
  display: block;         /* UA stylesheet makes things like <div> and <section> block */
  display: run-in;        /* Not particularly well supported or common */
  display: none;          /* Hide */
}

有一整套强制非表格元素的显示值表现得像表格元素，如果你需要的话。 -css 技巧

div {
  display: table;
  display: table-cell;
  display: table-column;
  display: table-colgroup;
  display: table-header-group;
  display: table-row-group;
  display: table-footer-group;
  display: table-row;
  display: table-caption;
}

【讨论】：

与我给 Nakib 的评论相同：这不是一种一致的方法。它会在没有滑块的其他页面上再次出现。更好地修复行为不端的元素本身。
@cptstarling 他询问了为什么会发生这种情况的理论，此外我还提供了两个解决方案。
这没关系，顺便说一句，我也是。但我不认为这是一个防水的解决方案。如果我的评论听起来很刺耳，那么这绝对不是我的意图，我只是在和你讨论:)
谢谢丹，这对我来说似乎很有意义。但是，我已将它添加到我的编码中，它似乎没有任何区别？知道为什么会这样吗？ jsfiddle.net/mugman/kw7nyobq
这个解决方案绝对不适合我！！我一定是做错了什么，但我就是看不到什么？有什么想法吗？ jsfiddle.net/mugman/0r4vvj9L/3

【解决方案4】：

将此添加到您的 CSS：

.nav{
  overflow: hidden;
}

这将防止此容器 (.nav) 折叠，这就是它的作用（添加背景或边框以使其生效）。我认为这些菜单项不会在弹出窗口中展开，因此 overflow: hidden 不会妨碍任何内容。

如果它确实有飞出功能，请考虑在两个孩子下方添加一个额外的 div（h1、ul）。将clear: both添加到下面的那个div应该有同样的效果。

如果容器只包含浮动元素，则可能会发生折叠，如本例所示。

【讨论】：