Question

我们假设我有两个专栏页面：文章+图片。并且使用flex我希望它在所有屏幕中都能响应，即我希望它始终保持其比例。

See template

我该怎么办？

以下是代码：

HTML

<section class="example">
    <h1>Lorem ipsum</h1>
    <section class="example-sides">
        <article class="example-text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non rhoncus quam, ut varius risus.
            Donec eu ullamcorper sem, eget sodales lacus. Sed iaculis eros lectus, fringilla sollicitudin nibh viverra
            volutpat. Integer dolor est, maximus non nibh eget, cursus commodo lectus. In finibus sagittis lectus. Donec
            nec mi dui. Praesent sit amet ullamcorper neque. Nulla id libero vitae dui fringilla volutpat. Suspendisse
            lacinia rutrum sem eget fringilla.

            Fusce porta orci dui, ac egestas nibh cursus vitae. Sed vel odio venenatis, elementum enim in, malesuada
            eros. In dapibus ex vitae leo vestibulum, non lacinia massa varius. Nullam faucibus eros ut maximus dapibus.
            Praesent vitae ante vulputate, sagittis lectus eu, egestas massa. Curabitur eget pulvinar nunc. Donec
            faucibus libero sed nisi efficitur, sit amet efficitur diam aliquet. Fusce a ultricies neque. Maecenas
            fringilla iaculis metus, efficitur faucibus lorem. Etiam nisi orci, hendrerit eu felis ac, interdum laoreet
            nisi. Etiam sit amet fermentum odio. Nulla et vehicula purus. Sed lacinia pharetra augue.
        </article>

        <figure class="example-img">
            <img src="https://pbs.twimg.com/profile_images/583353499808829441/PYs1EDZv.png" class="image">
            <figcaption>
                Lorem Ipsum
            </figcaption>
        </figure>
    </section>

CSS

.image {
  width: 300px;
  height: 200px;
}
.example {
  max-width: 800px;
  margin: 0 auto;
  font-size: 14px;
  padding: 54px 0 0 0;
  width: 100%;
  position: relative;
}
.example-sides {
  display: -webkit-flex;
  display: flex;
  display: -ms-flexbox;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  line-height: 20px;
  padding: 45px 0 55px 0;
}
.example-text {
  box-sizing: border-box;
  float: left;
  padding-left: 0 !important;
}
.example-img {
  box-sizing: border-box;
  margin-left: 20px;
}

Answer 1

请尝试这个

/*  SECTIONS  */
.section {
  clear: both;
  padding: 0px;
  margin: 0px;
}

/*  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_2_of_2 {
  width: 100%;
}
.span_1_of_2 {
  width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
  .col { 
    margin: 1% 0 1% 0%;
  }
}

@media only screen and (max-width: 480px) {
  .span_2_of_2, .span_1_of_2 { width: 100%; }
}

<div class="section group">
  <div class="col span_1_of_2">
    This is column 1
  </div>
  <div class="col span_1_of_2">
    This is column 2
  </div>
</div>

Answer 2

你需要一个嵌套的flex div来接近它。

div#mainContent{
display:flex;
flex-direction:row;
flex-wrap:wrap;
height:500px;
position:relative;}

#mainContent .forImage{
  position:relative;
  background:red;
  width:30%;
  height:100%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.forImage .theImage{
  width:90%;
  margin-top:50px;
}
.theImage img{
width:100%;}

#mainContent .forText{
  background:yellow;
  width:70%;
  height:100%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  position:relative;
}
.forText .theText{
 width:90%;
  margin-top:50px;
}

<div id="mainContent">
<section class="forImage">
  <div class="theImage">
    <image src="http://imagecolony.com/wp-content/uploads/2016/09/Wallpaper-Wide-803.jpg">
  </div>
</section>
<section class="forText">
  <div class="theText">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</section>
</div>

Answer 3

这是一个起点：

＆＃13;

body {
  max-width: 95%;
  background: #111;
}
.columnleft {
  float: left;
  max-width: 50%;
}
.columnright {
  float: right;
  max-width: 50%;
}
.article {
  border: 1px solid #999;
  display: inline-block;
  margin: 4%;
}
.title {
  color: #aff;
  font-size: 22px;
  text-align: center;
  margin: 20px 0 5px 0;
}
.content {
  color: #888;
  font-size: 18px;
  text-align: justify;
  padding: 20px;
  margin: 15px 15px 30px 15px
}
img {
  margin: 0 auto;
  max-width: 100%
}

＆＃13;

<body>
  <div class="columnleft">
    <div id="article1" class="article">
      <div class="title">Headline 1</div>
      <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere
        menandri mei te, praesent democritum no pro. Aliquid tractatos in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore.
      </div>
    </div>
    <div id="article2" class="article">
      <div class="title">Headline 2</div>
      <div class="content">
        <img src="http://placehold.it/1200x600">
      </div>
    </div>
    <div id="article3" class="article">
      <div class="title">Headline 3</div>
      <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro.Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere
      </div>
    </div>
  </div>
  <div class="columnright">
    <div id="article4" class="article">
      <div class="title">Headline 4</div>
      <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit.
      </div>
    </div>
    <div id="article5" class="article">
      <div class="title">Headline 5</div>
      <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere
        menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum
      </div>
    </div>
    <div id="article6" class="article">
      <div class="title">Headline 6</div>
      <div class="content">
        <img src="http://placehold.it/1000x400">
      </div>
    </div>
  </div>
</body>

＆＃13;

Answer 4

Flexbox 是此布局的理想选择

如果您想保留HTML结构并且图片必须位于左侧，则还必须设置flex-direction: row-reverse或提供order，否则您只需放置figure在article标记之前。

要实现所需的布局，只需将CSS更改为以下

<强> CSS

.example {
  max-width: 800px;
  margin: 0 auto;
  font-size: 14px;
  padding: 54px 0 0 0;
  width: 100%;
  position: relative;
}

.example-sides {
  display: flex;
  line-height: 20px;
  padding: 0 20px;
}

.example-text {
  flex: 1;
  min-width: 200px;
  order: 2;
  margin-left: 20px;
}

.example-img {
  flex: 0 1 300px;
  order: 1;
  margin: 0;
}

.image {
  width: 100%;
  max-height: 200px;
}

.example {
  max-width: 800px;
  margin: 0 auto;
  font-size: 14px;
  padding: 54px 0 0 0;
  width: 100%;
  position: relative;
}
.example-sides {
  display: flex;
  line-height: 20px;
  padding: 0 20px;
}
.example-text {
  flex: 1;
  min-width: 200px;
  order: 2;
  margin-left: 20px;
}
.example-img {
  flex: 0 1 300px;
  order: 1;
  margin: 0;
}
.image {
  width: 100%;
  max-height: 200px;
}

<section class="example">
  <h1>Lorem ipsum</h1>
  <section class="example-sides">
    <article class="example-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non rhoncus quam, ut varius risus. Donec eu ullamcorper sem, eget sodales lacus. Sed iaculis eros lectus, fringilla sollicitudin nibh viverra volutpat. Integer dolor est, maximus non
      nibh eget, cursus commodo lectus. In finibus sagittis lectus. Donec nec mi dui. Praesent sit amet ullamcorper neque. Nulla id libero vitae dui fringilla volutpat. Suspendisse lacinia rutrum sem eget fringilla. Fusce porta orci dui, ac egestas nibh
      cursus vitae. Sed vel odio venenatis, elementum enim in, malesuada eros. In dapibus ex vitae leo vestibulum, non lacinia massa varius. Nullam faucibus eros ut maximus dapibus. Praesent vitae ante vulputate, sagittis lectus eu, egestas massa. Curabitur
      eget pulvinar nunc. Donec faucibus libero sed nisi efficitur, sit amet efficitur diam aliquet. Fusce a ultricies neque. Maecenas fringilla iaculis metus, efficitur faucibus lorem. Etiam nisi orci, hendrerit eu felis ac, interdum laoreet nisi. Etiam
      sit amet fermentum odio. Nulla et vehicula purus. Sed lacinia pharetra augue.
    </article>
    <figure class="example-img">
      <img src="https://pbs.twimg.com/profile_images/583353499808829441/PYs1EDZv.png" class="image">
      <figcaption>
        Lorem Ipsum
      </figcaption>
    </figure>
  </section>
</section>

Flex：使响应两列页面

4 个答案: