Question

我有一个显示2列的网页。在PC上，这两列的显示完全符合我的要求，但是在移动屏幕上查看时出现了问题。

在移动屏幕上，我希望第二列下降到第一列下方，并且我希望两列都位于屏幕中央，但是发生的情况是第一列在屏幕的左侧，第二列在屏幕的左侧是Facebook的供稿），即使我将宽度设置为80％，也对屏幕而言太宽。

这是我的html：

<div class="section group">
<div class="col span_1_of_2">
<img class="img11" src="images/trout.jpg" alt="trout" title="The Trout Inn">
<hr style="width: 100%"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus neque eu felis condimentum ullamcorper. Aliquam erat volutpat. Phasellus viverra lectus dignissim ex ultricies ornare. Donec interdum massa non neque consectetur, eget molestie libero faucibus. Nulla gravida finibus libero, eu dictum turpis porta a. Donec ex tellus, dictum et massa eget, mattis suscipit justo. Vivamus tempus enim at nibh lobortis semper vitae sed mi. Mauris efficitur ipsum a nulla ultricies, sed ultrices ligula dignissim
</div>
<div class="col span_2_of_2">
<label>Our Facebook Feed</label>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ftesttest%2F&tabs=timeline&width=340&height=1000&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=999999" width="340" height="1000" style="border:none;overflow:hidden" allow="encrypted-media"></iframe>
</div>
</div><!-- section  group -->

这是我的CSS：

/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: auto;
    width: 60%;
    }

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF TWO  */
.span_1_of_2 {
    width: 63.1%;
padding-right: 15px;
border-right-style: solid;
border-color: #444444;
border-width: 1px;
}
.span_2_of_2 {
    width: 32.2%;
}

/*  IF screen is LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: auto;
    width: 90%;
    }

/*  COLUMN SETUP  */
.col {
    display: block;
    margin: auto;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
    content:"";
    display:block;
margin: auto;
}
.group:after {
    clear:both;
}

/*  GRID OF THREE  */
.span_1_of_2 {
padding: 0px;
border: none;
display: block;
margin: auto;
    width: 70%;
}
.span_2_of_2 {
padding: 0px;
border: none;
display: block;
margin: auto;
    width: 50%;
}
}

我尝试更改CSS中的许多参数，但无法使其正常工作，现在我迷失了选项。

有人可以帮助我对齐这些列吗？

非常感谢

Tog

Answer 1

使用flex和flex方向，您可以更改列的放置方式。

您可以在此处阅读更多内容 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.section{display:flex;flex-direction:column;}
.span_1_of_2{flex:1;padding:5px;}
.span_2_of_2{flex:1;padding:5px}

@media screen and (min-width:768px){
.section{display:flex;flex-direction:row;}
}

<div class="section group">
<div class="col span_1_of_2">
  <img class="img11" src="images/trout.jpg" alt="trout" title="The Trout Inn">
  <hr style="width: 100%"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus neque eu felis condimentum ullamcorper. Aliquam erat volutpat. Phasellus viverra lectus dignissim ex ultricies ornare. Donec interdum massa non neque consectetur, eget molestie libero faucibus. Nulla gravida finibus libero, eu dictum turpis porta a. Donec ex tellus, dictum et massa eget, mattis suscipit justo. Vivamus tempus enim at nibh lobortis semper vitae sed mi. Mauris efficitur ipsum a nulla ultricies, sed ultrices ligula dignissim
  </div>
<div class="col span_2_of_2">
  <label>Our Facebook Feed</label>
  <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ftesttest%2F&tabs=timeline&width=340&height=1000&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=999999" width="340" height="1000" style="border:none;overflow:hidden" allow="encrypted-media"></iframe>
  </div>
</div><!-- section  group -->

小屏幕上的列行为不正确

1 个答案: