将 3 个 div 并排浮动并堆叠在较小的屏幕上

Question

我已经搜索了论坛并根据当前答案尝试了多种方法，但似乎没有任何方法可以满足我的需要，因此非常感谢任何帮助，因为我正在努力！

我正在使用 Joomla 3 并创建了一个自定义 html 模块来显示带有注册表单的下载。

我需要在左侧显示一些文本，我正在调用的注册模块在中间使用 Modules Anywhere，在右侧显示图像，像这样：

Text  |  Module  |  Image

然后在小屏幕上它应该像这样堆叠：

Text
Module
Image

我的无效代码是：

<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>

我希望将间距设置为百分比，这样在水平视图中它看起来不错，甚至在所有屏幕尺寸上也是如此。

提前感谢您的任何建议

Answer 1

要在某个断点处有不同的布局，您需要 CSS 媒体查询：

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; }
}

当然你可以把断点改成任何你想要的。在这种情况下，列的 1/3 宽度和浮动将仅适用于 768px 屏幕宽度以上。在此之下，div 将采用默认的 100% 宽度，没有浮动（即堆叠）。 .row 父元素简单地包含了所有带有 clear 的列，所以它们不会全部溢出并用浮动弄乱布局。

我强烈建议将 Bootstrap 视为响应式框架。这是处理此类布局的行业标准。

Answer 2

试试这个 -> 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 3

*{
    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>

Answer 4

浮点数可能很棘手。您还有其他几个选择：

1.显示：内联块和显示：块

在小屏幕尺寸下：

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

然后使用您希望它们并排放置的任意宽度的最小宽度媒体查询。您选择的宽度（此处为 700 像素）适合您的设计：

@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。弹性框

设置三个部分的父容器以显示为 flex，并设置子容器以您希望的方式运行。

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

如果您能够使用（即不支持某些侏罗纪浏览器），flexbox 有很多选项。尝试一些生成器 - 有很多好的生成器 - 并查看 CSS-tricks 以获得对 flexbox 的很好解释。祝你好运！

将 3 个 div 并排浮动并堆叠在较小的屏幕上

Float 3 divs next to each other and stack on smaller screens

html

css

joomla3.0