aligning elements left and right
Question
I have a web page that has two columns one I have to float left and the other float right which works fine on a regular webpage. However when I view it on a phone for example(I have mobile jquery and css) So it all fits to the dimension of the screen. And since the two column page doesn't fit, it puts its on the next line, which then looks wrong because the column on the right is then aligned right on the next line. What is the best way of aligning it left and right without using the float css property. I think I should be able to do this by either setting the margin or padding using a percentage. Any ideas on the best way to do this?
3 answers
solution1
0 2013-01-15 18:07:16
Set a minimum width to the body so that the two divs fit on the same line.
body{
min-width: 800px; //or whatever the size of the two divs is
}
solution2
0 2013-01-15 18:07:58
You're probably doing it right, but you want to remove the float properties on mobile devices, and remove the width if you previously set it so they fit the full screen, and apply margins (if necessary).
@media screen and (max-width: 480px) {
.floated-div {
float: none;
width: auto;
margin: 0 1em;
}
}
You can read more here: http://css-tricks.com/css-media-queries/
solution3
0 2015-01-08 05:58:20
Here is a jsbin ( http://jsbin.com/funevi/2/edit?html,css,output ) showing how to align two items on the same row without using floats or flexbox. To make matters better, using inline-block instead of floats allows the left and right content to be vertically aligned relative to each other.
The default is to be top aligned relative to each other. But adding the class vmiddle or vbottom to the containing div.left-right element will cause the left content box and the right content box to be aligned with each other.
box-sizing: border-box allows us to use logical numbers safely across browsers and helps prevent the contents from wrapping around if borders or margins are added to the left or right content divs.
When using inline-block elements, to prevent what appears to be white space around the left and right content elements, the container specifies a font size of 0. The font size is then set to initial for the content divs.
Lastly the colors are set on the left and right content divs simply to make it visually apparent how the left and right vertically align relative to each other and are not required, obviously.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.left-right {
box-sizing: border-box;
display: inline-block;
font-size: 0;
position: relative;
white-space: nowrap;
width: 100%;
}
div.left-right div.left,
div.left-right div.right {
box-sizing: border-box;
display: inline-block;
font-size: initial;
position: relative;
white-space: normal;
width: 50%;
vertical-align: top;
}
div.left-right.vmiddle div.left,
div.left-right.vmiddle div.right {
vertical-align: middle;
}
div.left-right.vbottom div.left,
div.left-right.vbottom div.right {
vertical-align: bottom;
}
div.left-right div.left {
background: firebrick;
text-align: left;
}
div.left-right div.right {
background: forestgreen;
text-align: right;
}
</style>
</head>
<body>
<div class="left-right">
<div class="left">
<p>Paragraph 1</p>
</div>
<div class="right">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.