使用CSS定位HTML [英] Positioning HTML using CSS
问题描述
我仍然在使用CSS定位HTML元素时遇到困难。我了解基本知识，元素主要以块或内联方式显示;然而，当涉及到实际编码一个网站时，我感到困惑。我已经在下面加入了我的HTML代码，这让我很满意。我现在已经开始使用CSS来设计代码了。我想在我的页面顶部创建一个导航栏;为此，我使用了CSS编码（也在下面）。
首先，我将列表显示为内联块。其次，我将标题向左和我的列表右移，这一切看起来都很好。我的困惑是为什么我的班级滑块在两个元素之间向上移动？
我非常感谢解决方案，但更为重要的是，如果您能够解释实际理论的功能，为什么会发生这种情况，我会非常感激。我自己的理论是，通过浮动这两个元素，它们已经从页面的正常流程中移除，允许页面上的下一个元素移动到剩下的空白空间中？再次，我会感谢一个解决方案，但更多的是我想了解它背后的理论，所以我可以在将来自己解决类似的问题。
<风格>
.nav li {
display：inline-block;
}
.nav ul {
float：right;
}
.nav h1 {
float：left;
}
< / style>
< div class =nav>
< h1>简历< / h1>
< ul>
< li>主页< / li>
< li>投资组合< / li>
< li>技巧< / li>
< li>体验< / li>
< li>联系人< / li>
< / ul>
< / div>
< / div>
< div class =slider>
< h2> Andrew Hardiman< / h2>
< p> Webdesigner&显影剂< / p为H.
< p>阅读更多内容< / p>
< p> HTML< / P>
< p> css< / P>
< h3>我设计和开发出色，易于浏览和退出的神奇网站。< / h3>
< p>与我们共同规划您的数字营销组合，并在线获得更好的结果。< / p>
< / div>
< / div>
< div class =Portfolio>
< div class =container>
< h3>投资组合< / h3>
< img src =https://download.unsplash.com/photo-1423655156442-ccc11daa4e99>
< h3>客户< / h3>
< h4> JPMorgan< / h4>
< h3>项目中的角色< / h3>
< h4> Project Lead< / h4>
< h3>包含的项目< / h3>
< h4>移动和Web界面< / h4>
< / div>
< / div>
< div class =skills>
< div class =container>
< h3>技能< / h3>
< p>我是一名混合Web开发人员，喜欢利用我的前端和后端技能以及
与我的创意设计网站保持联系< / p>
< p> html< / p>
< p> CSS< / p>
< p> JavaScript< / p>
< p> jQuery< / P>
< / div>
< / div>
< div class =体验>
< div class =container>
< h3>体验< / h3>
< h4> Work Experience< / h4>
< p> Blah blah blah，专业于此，< p>
< h5> Royal National Lifeboat Institution< / h5>
< p>海岸支援主任，等等等等< p>
< h5> Pioneer Business Systems< / h5>
< p> blah d，blah d，blah< / p>
< h5> JPMorgan Chase< / h5>
< p>更多等等，等等< / p>
< / div>
< / div>
< div class =wrap>
< div class =container>
< img src =https://download.unsplash.com/photo-1424296308064-1eead03d1ad9>
< h3> Andrew Hardiman< / h3>
< p>我曾为世界顶级投资银行之一（摩根大通）工作过，并且每分钟都爱上
！< / p>
今天，我离开了高收入的世界，以满足我对自由职业者
竞技场的好奇心，这是迄今为止令人惊叹的竞技场，我想不出为什么我没有采取更快地尝试< / p>
< / div>
< / div>
< div class =contact>
< div class =container>
< div id =用户名>< / div>
< div id =Email>< / div>
< div id =费用或您的项目>< / div>
< div id =Timeline>< / div>
< h4> LOCATION< / h4>
< p> Flat 1，29 Markham Road，Bournemouth，BH9 1HZ< / p>
< h4>我是社交< / h4>
< ul>
< li> Facebook< / li>
< li> Twitter< / li>
< li> Google +< / li>
< li> Linkedin< / li>
< li> Flickr< / li>
< / ul>
< div class =发送>
< a href =＃>发送< / a>
< / div>
< / div>
< / div>
< div class =location>
< / div>
< div class =top-footer>
< div class =footer-menu>
< h4> Menu< ; / h4>
< ul>
< li>主页< / li>
< li> Portfolio< / li>
< li>技巧< / li> ;
< li> Experience< / li>
< li>联系人< / li>
< / UL>
< / div>
< div class =footer-archives>
< h4>存档< / h4>
< ul>
< li> 2014年3月< ; / li>
< li> 2014年4月< / li>
< li> 2014年5月< / li>
< li> 2014年6月< <立GT; 7月< /锂>
< / ul>
< / div>
< div class =widget>
< p>不确定这是什么，您需要找出< / p>
< / div>
< div class =follow>
< h4>跟随< / h4>
< ul>
< li>< a href =＃>< / li>
< li>< a href =＃>< / li>
< li>< a href =＃>< / li>
< ul>
< / div>
< div class =footer-bottom>
< P>©2015 Andrew Hardiman网站< / p>
< / div>
解决方案1：
您可以简单地清除您的滑块，如下所示：
.slider {
clear：both ;
}
但要回答您的问题 .slider 在您的 ul 和您的 h1 之间。由于浮动这两个元素的宽度不占用父容器宽度的100％，所以 .slider 有足够的空间在他们之间流动。这就是为什么要添加清除：到 .slider 类是必要的。
jsFiddle
解决方案2：
需要考虑的因素由于您不是通过 div ，你可以自由使用它们作为容器。将它们的宽度设置为100％并在其中添加元素。您可以轻松地做这样的事情来解决您的问题。
< div class =row>
< ul>
< li>主页< / li>
< li>投资组合< / li>
< li>技巧< / li>
< li>体验< / li>
< li>联系人< / li>
< / ul>
< / div>
然后赋予.row这些样式：
.row {
display：inline-block; / *或display：block; * display：table; * /
宽度：100％;
明确：两者;
}
这将确保没有其他元素进入此空间。
下面是这个解决方案的一个小提琴： net / kw7nyobq / 3 /rel =nofollow> jsFiddle
评论：
请阅读这篇文章来自CSS-Tricks
div {
display：inline; / *所有元素的缺省值，除非UA样式表覆盖* /
display：inline-block; / *块的特征，但坐在一行* /
display：block; / * UA样式表使得< div>和<节> block * /
display：run-in; / *没有特别好的支持或常见的* /
display：none; / *隐藏* /
}
如果您需要这样做，则显示值组的非表元素到
的行为就像表元素一样。 -css-tricks
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;
}
I am still having difficulty with the positioning HTML elements using CSS. I understand the basics, that elements are displayed primarily as block or inline; however, when it comes down to actually coding a site I get confused. I have include my HTML coding below, which I am mostly happy with. I have now moved on to styling the code with CSS. I would like to create a Navigational bar, at the top of my page; to do so, I have used the CSS coding (also below).
Firstly, I displayed my list as inline-block. Secondly, I have floated my heading to the left and my list to the right, which all looks fine. My confusion comes as to why my class ’slider’ then moves up in between the two elements?
I would very much appreciate a solution, but even more so, I would really appreciate if you could explain the actual theory an functionality as to why this is occurring. My own theory is that by floating the two elements, they have been removed from the ’normal’ flow of the page, allowing the next element on the page to move into the empty space left behind? Again, I would appreciate a solution, but more so I would like to understand for myself the theory behind it, so I can tackle similar problems in the future on my own.
<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>
Solution 1:
You can simply clear your slider like so:
.slider{
clear:both;
}
But to answer your question as to why your .slider went between your ul and your h1. Since the width of the two elements you had floated weren't taking up 100% of the width of the parent container, your .slider had enough room to flow between them. That's why adding clear:both to your .slider class was necessary.
jsFiddle
Solution 2:
Something to consider. Since you aren't paying by the div, you can use them liberally as containers. Set their width to 100% and add your elements inside. You could easily do something like this to solve your problem.
<div class="row">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Skills</li>
<li>Experience</li>
<li>Contact</li>
</ul>
</div>
Then give .row these styles:
.row {
display: inline-block; /* or display: block;* display: table; */
width:100%;
clear:both;
}
This will ensure that no other elements enter this space.
Here's a fiddle with this solution:
jsFiddle
Addressing concerns in comments:
Please read this article from CSS-Tricks
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 */
}
There is a whole set of display values the force non-table elements to behave like table-elements, if you need that to happen. -css-tricks
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;
}
这篇关于使用CSS定位HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
