彼此相邻漂浮3个div，并堆叠在较小的屏幕上

Question

I have searched the forum and tried numerous ways of doing this based on current answers but nothing seems to work how I need it to so any help is GREATLY appreciated as I am pulling my hair out!

I am working in Joomla 3 and have created a custom html module to display a download with sign up form.

I need to have some text on the left, the sign up module I am calling with Modules Anywhere in the center and an image on the right, so like this:

Text  |  Module  |  Image

And then on small screens it should stack so like this:

Text
Module
Image

The code I have which isn't working is:

 <div style="float: left;">Blah blah blah</div> <div>{module Newsletter Signup}</div> <div><img src="images/content/ebook.png" alt="ebook" width="150" /></div> 

I would like to have the spacing as a percentage so it looks nice and even on all screen sizes when in horizontal view.

Thanks in advance for any advice

Answer 1

Try this -> http://jsfiddle.net/tm4trhsw/

 #wrapper { overflow:hidden; } .item { float:left; width:27%; outline:1px solid blue; margin:0 0.5%; padding:2%; } @media only screen and (max-width: 40em) { .item { float:none; width:100%; margin-bottom:5px } } 

 <div id="wrapper"> <div id="text" class="item">TEXT BLA BLA</div> <div id="module" class="item">MODULE BLA BLA</div> <div id="image" class="item">Image BLA BLA</div> </div> 

Answer 2

To have a different layout at a certain breakpoint, you'll need CSS media queries:

HTML

<div class="row">
  <div class="col">
    blah blah blah
  </div>
  <div class="col">
    {module}
  </div>
  <div class="col alignImgRight">
    <img src="images/content/ebook.png" alt="ebook" width="150" />
  </div>
</div>

CSS

.row:after { clear: both; }

.row:before, .row:after {
  content: " ";
  display: table; }

@media (min-width: 768px) {
  .col { 
    float: left;
    width: 33.33333333%; }

  .alignImgRight { text-align: right; }
}

Of course you can change the breakpoint to whatever you want. In this situation the 1/3 width and float of the column will only apply above 768px screen width. Below that, the divs will take their default 100% width with no float (ie stacked). The .row parent element simply contains all the columns with a clear on it, so they don't all spill out and mess up layouts with the floats.

I would highly recommend look at Bootstrap as a responsive framework. It's an industry standard for handling layouts like this.

Answer 3

Floats can be tricky. You have a couple of other options:

1. Display: inline-block and display: block

At small screen sizes:

.text, .module, .image {
    display: block;
    width: 100%;
}

Then use a min-width media query from whatever width you want to have them sit side by side. The width you choose (here 700px) is whatever works for your design:

@media (min-width: 700px) { 
    .text, .module, .image {
        display: inline-block;
        width: 30%; /*you'll have to play with this % */
    }
 }

Mozilla Developer Info on Media Queries

2. Flexbox

Setup the parent container of the three sections to display as flex and the children to behave the way you want them.

.parent {
    display: flex;
    flex-direction: row;
    justify-content: center; /*you might prefer space-between. It depends on how it looks*/
}

There are lots of options for flexbox if you're able to use it (that is, not supporting some jurassic browser). Try some generators - there are lots of good ones - and check out CSS-tricks for a great explanation of flexbox. Good luck!

Answer 4

 *{ padding: 0; margin: 0; box-sizing: border-box; } .table{ width: 100%; display: table; } .table-cell{ display: table-cell; vertical-align: middle; border-left: 1px solid #000; width: 33.333%; text-align: center; padding: 15px; background: #f7f7f7; } .table-cell:nth-child(1){ border-left: none; } @media screen and (max-width: 767px){ .table-cell{ width: 100%; border-left: none; display: table-caption; } .table-cell:nth-child(1){ border-left: none; } .table-cell:nth-child(2){ background: #ccc; } } 

 <div class="table"> <div class="table-cell">Text</div> <div class="table-cell">Module</div> <div class="table-cell">Image</div> </div>