[英]Aligning three elements (left/center/right) inside a container
I am attempting to create a full-width banner with three internal inline elements.我正在尝试创建一个带有三个内部内联元素的全宽横幅。 A back link, a logo and a forward link.一个反向链接、一个标志和一个正向链接。
I would also like to use the same code to create a full-width banner with TWO internal inline elements.我还想使用相同的代码来创建一个带有两个内部内联元素的全宽横幅。 A left back link and a central logo.一个左后链接和一个中央标志。
What I have so far, is:到目前为止,我所拥有的是:
HTML HTML
<section id="header-blue">
<div id="header-wrap">
<div class="header-left"><p>1</p></div>
<div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
<div class="header-right"><p>3</p><p>3</p></div>
<div class="clearfix"></div>
</div>
</section>
SCSS:社会保障:
#header-blue {
width: 100%;
margin-bottom: 50px;
height: auto;
background-color: $primary-blue;
color: #fff;
#header-wrap {
text-align: center;
border: 1px solid green;
margin: 0 auto;
padding: 1rem 2.5rem;
div {
display: inline-block;
vertical-align: middle;
}
}
.header-left {
float: left;
border: 1px solid red;
width: 100px;
}
.header-right {
float: right;
border: 1px solid red;
width: 100px;
}
.header-center {
border: 1px solid red;
margin: 0 auto !important;
display: inline-block;
width: 100px;
}
} // header-blue
I am looking for a solution that is widely supported, so I'm not sure if that rules flex out?我正在寻找一种得到广泛支持的解决方案,所以我不确定该规则是否适用?
The result is this: FIDDLE结果是这样的: FIDDLE
EDIT: THE FINAL CORRECT DESIGN WHEN COMPLETE编辑:完成后的最终正确设计
Disclaimer: Please understand that although this may be viewed as a 'duplicate' post, after a fair few hours of online research and trial and error, I am still no further progressed.免责声明:请理解,虽然这可能被视为“重复”的帖子,但经过几个小时的在线研究和反复试验,我仍然没有进一步的进展。 I would, therefore, like to seek help unique to this problem and learn in the process.因此,我想寻求针对此问题的独特帮助并在此过程中学习。
You can build the layout with CSS flexbox .您可以使用CSS flexbox构建布局。
For clarity and conciseness, I removed several non-essential decorative styles from the original code.为了清晰和简洁,我从原始代码中删除了几个非必要的装饰样式。 I also used compiled CSS for the benefit of those who don't use preprocessors.为了那些不使用预处理器的人的利益,我还使用了编译的 CSS。
#header-wrap { display: flex; /* 1 */ align-items: flex-start; /* 2 */ justify-content: space-between; /* 3 */ text-align: center; padding: 1rem 0; } #header-blue { margin-bottom: 50px; background-color: #3498DB; color: #fff; } .header-left { border: 1px solid red; width: 100px; } .header-right { border: 1px solid red; width: 100px; } .header-center { border: 1px solid red; width: 100px; }
<section id="header-blue"> <div id="header-wrap"> <div class="header-left"> <p>1</p> </div> <div class="header-center"> <p>2</p> <p>2</p> <p>2</p> <p>2</p> </div> <div class="header-right"> <p>3</p> <p>3</p> </div> </div> </section>
Notes:笔记:
flex-start
value will align each item at the start of the cross axis of the container. flex-start
值将在容器的交叉轴的起点对齐每个项目。 In this case, that's the top of the vertical (Y) axis.在这种情况下,这是垂直 (Y) 轴的顶部。 If you want the items vertically centered, use the center
value instead.如果您希望项目垂直居中,请改用center
值。 The default value is stretch
.默认值为stretch
。justify-content: space-around
.您也可以尝试justify-content: space-around
。 Note that this method will only center the middle item in the container if the left and right elements (the back/forward links) are equal width.请注意,如果左右元素(后/前链接)的宽度相等,则此方法只会使容器中的中间项居中。 If the links vary in length, you'll need to use another method (see boxes #71-78 here ).如果链接的长度不同,您将需要使用另一种方法(请参阅此处的框 #71-78)。 #header-wrap::after { /* 4 */ content: ""; width: 100px; } #header-wrap { display: flex; /* 1 */ align-items: flex-start; /* 2 */ justify-content: space-between; /* 3 */ text-align: center; padding: 1rem 0; } #header-blue { margin-bottom: 50px; background-color: #3498DB; color: #fff; } .header-left { border: 1px solid red; width: 100px; } .header-right { border: 1px solid red; width: 100px; } .header-center { border: 1px solid red; width: 100px; }
<section id="header-blue"> <div id="header-wrap"> <div class="header-left"> <p>1</p> </div> <div class="header-center"> <p>2</p> <p>2</p> <p>2</p> <p>2</p> </div> </div> </section>
Notes:笔记:
Flexbox is supported by all major browsers, except IE 8 & 9 .除了 IE 8 和 9 之外,所有主流浏览器都支持 Flexbox。
Some recent browser versions, such as Safari 8 and IE10, requirevendor prefixes .一些最新的浏览器版本,例如 Safari 8 和 IE10,需要供应商前缀。
For a quick way to add all the prefixes you need, use Autoprefixer .要快速添加所需的所有前缀,请使用Autoprefixer 。
More details in this answer .此答案中的更多详细信息。
From your structure you could use flex
(IE11) and justify-content
, then hide .clearfix
and remove it when on fourth position:从您的结构中,您可以使用flex
(IE11) 和justify-content
,然后隐藏.clearfix
并在第四个位置时将其删除:
with 3 (4 including clearfix) 3 个(4 个,包括 clearfix)
#header-wrap { display: flex; justify-content: space-between; } #header-wrap > div { border: solid; width: 100px; margin:0 0 auto;/* remove if you want each boxes same height */ } .clearfix:nth-child(4) { display: none; } .clearfix { opacity: 0; }
<section id="header-blue"> <div id="header-wrap"> <div class="header-left"><p>1</p></div> <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div> <div class="header-right"><p>3</p><p>3</p></div> <div class="clearfix"></div> </div> </section>
when only 2 (3) same CSS involved当只涉及2 (3) 个相同的 CSS 时
#header-wrap { display: flex; justify-content: space-between; } #header-wrap > div { border: solid; width: 100px; margin:0 0 auto;/* remove if you want each boxes same height */ } .clearfix:nth-child(4) { display: none; } .clearfix { opacity: 0; }
<section id="header-blue"> <div id="header-wrap"> <div class="header-left"><p>1</p></div> <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div> <div class="clearfix"></div> </div> </section>
with your structure you could use text-align
, :after
and the selector +
:对于您的结构,您可以使用text-align
、 :after
和选择器+
:
with 3 (4)与 3 (4)
#header-wrap { text-align: justify; } #header-wrap:after { content: ''; display: inline-block; width: 99%; } #header-wrap > div { display: inline-block; vertical-align: top; border: solid; width: 100px; } #header-wrap > div + div + div +.clearfix { display: none; } .clearfix { opacity: 0; }
<section id="header-blue"> <div id="header-wrap"> <div class="header-left"><p>1</p></div> <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div> <div class="header-right"><p>3</p><p>3</p></div> <div class="clearfix"></div> </div> </section>
and 2(3) same CSS involved :和 2(3) 个相同的 CSS 涉及:
#header-wrap { text-align: justify; } #header-wrap:after { content: ''; display: inline-block; width: 99%; } #header-wrap > div { display: inline-block; vertical-align: top; border: solid; width: 100px; } #header-wrap > div + div + div +.clearfix { display: none; } .clearfix { opacity: 0; }
<section id="header-blue"> <div id="header-wrap"> <div class="header-left"><p>1</p></div> <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div> <div class="clearfix"></div> </div> </section>
Widely supported - my immediate answer is to use display: table;
得到广泛支持 - 我的直接回答是使用display: table;
Let me 'fiddle' around with this for a moment and get back to you - I was just working on something similar yesterday.让我“摆弄”一下,然后再回复您——我昨天只是在做类似的事情。
EDIT 1: At first glance, I would advise utilizing classes versus ID's.编辑 1:乍一看,我建议使用类而不是 ID。 This deals with a much broader topic (CSS Specificity) but is extremely useful to think about early in your career.这涉及一个更广泛的主题(CSS 特异性),但在您职业生涯的早期考虑非常有用。 That being said, I am working on a solution for you, as I THINK I know what you want.话虽如此,我正在为您制定解决方案,因为我认为我知道您想要什么。
As the commenter mentioned - it would help ALOT to see what you want to see as an end result.正如评论者所提到的 - 看到你想要看到的最终结果会很有帮助。 From my interpretation of your screenshots (poor quality & non-descriptive FYI), I feel like you want this header
to maintain the left/back button and the logo on mobile devices.根据我对您的屏幕截图的解释(质量差和非描述性仅供参考),我觉得您希望此header
保留移动设备上的左/后按钮和徽标。 However, on a desktop/laptop viewport size, you want a forward button to show itself.但是,在台式机/笔记本电脑视口大小上,您需要一个前进按钮来显示自己。
If this is incorrect, please verify!如果不正确,请确认!
EDIT 2:编辑2:
Going off the above poster's JSFiddle, I've come up with a "better" solution that stacks the elements within the header
as opposed to going outside of the 'container' that it exists in: https://jsfiddle.net/f815aa6y/1/离开上面海报的 JSFiddle,我想出了一个“更好”的解决方案,将元素堆叠在header
,而不是超出它存在的“容器”: https : //jsfiddle.net/f815aa6y/ 1/
Still working on the right solution to get this to vertically align in the middle :)仍在研究正确的解决方案以使其在中间垂直对齐:)
Consider positioning the left and right elements differently.考虑以不同方式定位左右元素。
https://jsfiddle.net/5gxLvp8a/4/ https://jsfiddle.net/5gxLvp8a/4/
#header-wrap {
text-align: center;
border: 1px solid green;
margin: 0 auto;
padding: 1rem 2.5rem;
position: relative;
div {
display: inline-block;
vertical-align: middle;
}
}
.header-left {
float: left;
border: 1px solid red;
width: 100px;
position: absolute;
left: 25px;
}
.header-right {
float: right;
border: 1px solid red;
width: 100px;
position: absolute;
right: 25px;
}
See code snippet below:请参阅下面的代码片段:
html, html a { font-size: 10px; } #header-blue { width: 100%; margin-bottom: 50px; height: auto; background-color: #3498DB; color: #fff; } #header-blue #header-wrap { text-align: center; border: 1px solid green; margin: 0 auto; padding: 1rem 2.5rem; position: relative; } #header-blue #header-wrap div { display: inline-block; vertical-align: middle; } #header-blue .header-left { float: left; border: 1px solid red; width: 100px; position: absolute; left: 25px; } #header-blue .header-right { float: right; border: 1px solid red; width: 100px; position: absolute; right: 25px; } #header-blue .header-center { border: 1px solid red; margin: 0 auto !important; display: inline-block; width: 100px; } .clearfix:after { content: " "; visibility: hidden; display: block; height: 0; clear: both; }
<section id="header-blue"> <div id="header-wrap"> <div class="header-left"><p>1</p></div> <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div> <div class="header-right"><p>3</p><p>3</p></div> <div class="clearfix"></div> </div> </section> <section id="header-blue"> <div id="header-wrap"> <div class="header-left"><p>1</p></div> <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div> <div class="clearfix"></div> </div> </section>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.