[英]Positioning divs top, left, right
I would like to make a div like below image : 我想制作一个如下图所示的div:
I don't know where is my mistake : 我不知道我的错误在哪里:
https://jsfiddle.net/4ftb9349/ https://jsfiddle.net/4ftb9349/
my css: 我的css:
.div-newsletter-top {
margin: 0px auto;
width: 60%;
}
.button_register_nslwtr {
width: 40px;
height: 40px;
border-radius: 20px;
border: 1px solid #D9D9D9;
background: #FFF none repeat scroll 0% 0%;
cursor: pointer;
transition: all 0.2s ease 0s;
}
div.cs-skin-elastic {
background: transparent none repeat scroll 0% 0%;
font-size: 0.9em;
font-weight: 100;
color: #B9B9B9;
float: left;
width: 25%;
border: 1px solid #DDD;
height: 20%;
border-radius: 0px 20px 20px 0px;
}
my html : 我的HTML:
<div class="div-newsletter-top">
<div style="width:50%;">
<input style="width:60%;margin: 0 auto; " type="text" class="form-control" />
</div>
<div style="width:34px;height:34px;float:right;">
<button class="button_register_nslwtr">
reg
</button>
</div>
<div style="width:60px">
<select class="cs-select cs-skin-elastic">
<option value="" disabled selected>choose city</option>
<option value="" data-class="flag-france">tehran</option>
</select>
</div>
</div>
The problem is that div
elements are block elements. 问题是
div
元素是块元素。 You can change them to span
elements to get the result you want. 您可以将它们更改为
span
元素以获得所需的结果。 See fiddle . 看小提琴 。
<span style="width:50%;">
<input style="width:60%;margin: 0 auto; " type="text" class="form-control" />
</span>
<div style="width:34px;height:34px;float:right;">
<button class="button_register_nslwtr">
reg
</button>
</div>
<span style="width:60px">
<select class="cs-select cs-skin-elastic">
<option value="" disabled selected>choose city</option>
<option value="" data-class="flag-france">tehran</option>
</select>
</span>
You just need to add this code in your CSS 您只需要在CSS中添加此代码即可
.div-newsletter-top > div{
position: relative;
float: left;
}
In fact, some more changes see updates jsfiddle 事实上,更多的更改请参阅更新jsfiddle
Try adding this 尝试添加此功能
.div-newsletter-top { margin: 0; width: 100%; position: relative; height: 100px; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; } .button_register_nslwtr { width: 40px; height: 40px; border-radius: 20px; border: 1px solid #D9D9D9; background: #FFF none repeat scroll 0% 0%; cursor: pointer; transition: all 0.2s ease 0s; } .cs-skin-elastic { background: transparent none repeat scroll 0% 0%; font-size: 0.9em; font-weight: 100; color: #B9B9B9; width: 25%; border: 1px solid #DDD; height: 20%; border-radius: 0px 20px 20px 0px; }
<div class="div-newsletter-top"> <input style="" type="text" class="form-control" /> <select class="cs-select cs-skin-elastic"> <option value="" disabled selected>choose city</option> <option value="" data-class="flag-france">tehran</option> </select> <button class="button_register_nslwtr"> reg </button> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.