Question

我已经搜索了论坛，并根据当前的答案尝试了很多方法，但似乎没有任何工作方式，所以任何帮助都非常受欢迎，因为我正在拉我的头发！

我在Joomla 3工作并创建了一个自定义html模块，以显示带注册表单的下载。

我需要在左边有一些文字，我在中心使用模块随处可见的注册模块和右边的图像，所以这样：

Text  |  Module  |  Image

然后在小屏幕上它应该堆叠如下：

Text
Module
Image

我的代码是：

＆＃13;

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

＆＃13;

我希望将间距设为百分比，以便在水平视图中看起来很漂亮甚至在所有屏幕尺寸上。

提前感谢任何建议

Answer 1

试试这个 - ＆gt; 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

要在某个断点处使用不同的布局，您需要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父元素只包含所有清晰的列，因此它们不会全部溢出并使用浮点格式化布局。

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

Answer 3

花车可能很棘手。您还有其他几种选择：

<强> 1。显示：内联块和显示：块

小屏幕尺寸：

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

然后使用任何宽度的最小宽度媒体查询，让它们并排放置。您选择的宽度（此处为700px）适用于您的设计：

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

设置三个部分的父容器以显示为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的一个很好的解释。祝你好运！

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>

Float 3 divs彼此相邻并堆叠在较小的屏幕上

4 个答案: