如何在响应式 2 列布局上跟随图像调整大小？

Question

我有一个布局，它工作正常，除了一些小颠簸，我花了一整天的时间来研究它，搜索谷歌，在这里，尝试其他布局，我什至尝试了 Bootstrap，但我什么也没得到.

问题是：我是新手，布局是响应式的（我从网站上得到的，它是免费的），我找到了一种在 w3school 上调整图像大小的方法。

但文本只是不协作。如果我修复一件事，我会破坏另外十件事。 我无法使文字整齐地保持在图像的比例内。我也不能设置一个高度，所以下面的按钮可以与它旁边的 div 内的按钮处于相同的基线。无论如何，我给你看会更好，所以这里是提琴手：

https://jsfiddle.net/JohnnyJohnny/y6khb6ez/

这里是代码：

<div class="section group"> <!--everythyng's inside this-->

    <div class="col span_1_of_2"> <!--left column-->
        <h1>EXAMPLE_one</h1>

        <img class="imghome" width="300" height="200"  src="https://upload.wikimedia.org/wikipedia/commons/b/bc/Information_example_page_300px.jpg">
        <!--imgs have w and h set here to work with media query resizing-->

        <p>This is a paragraph. It cannot break mproperply; it must follow proper Syllable Division Rules. As you can see, it will invade the dog's space, as it will not follow image resize.</p>

        <button class="button">button</button>
    </div>

    <div class="col span_1_of_2"> <!--right column-->
         <h1>EXAMPLE_two</h1>

         <img class="imghome" width="300" height="200" src="http://www.starlight-beads.com/wp-content/uploads/2017/01/8-Tricks-To-Help-You-Take-Care-Of-Your-Pet-300x200.jpg">

         <p>That dog is very hungy. This paragraph, however, should have the same height as the other one.</p>

         <button class="button">button</button>
    </div>

</div>

/*  GRID OF TWO   ============================================================================= */
.span_2_of_2 {
width: 100%;
}

.span_1_of_2 {
width: 49.2%;
text-align:center;
}

.span_1_of_2 p{

width:300px;
margin: 0 auto;
}

 /*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.span_2_of_2 {
width: 100%; 
}
.span_1_of_2 {
    width: 100%; 
}

.span_1_of_2 p{
 max-width: 50%; 
height:auto;
}
}
/*  SECTIONS  
============================================================================= */

.section {
    clear: both;
    padding: 0px;
    margin: 0px;
    }

.section {
    height:300px;
}

 /*  GROUPING  
============================================================================= */


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

/*  GRID COLUMN SETUP   
==================================================================== */

.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */

/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col { 
        margin: 1% 0 1% 0%;
    }
}

 .button {
    margin-top:1em;
}
.imghome {
  max-width:100%;/*  resizes the image */
  height:auto;

}

我不能使用自动换行属性，因为我需要单词来保持它们的语法。

我没办法

e, for inst

ance，这个k

事物的本质。

感谢任何帮助。 谢谢。

Answer 1

j只需在文字上使用max-width 而不是width

.span_1_of_2 p{

    max-width:300px;
}

See updated fiddle

Answer 2

查看更新演示here

更新的 CSS：

/*  GRID OF TWO   ============================================================================= */

.span_2_of_2 {
  width: 100%;
}

.span_1_of_2 {
  width: 49.2%;
  text-align: center;
}

.span_1_of_2 p {
  max-width: 300px;
  margin: 0 auto;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
  .span_2_of_2 {
    width: 100%;
  }
  .span_1_of_2 {
    width: 100%;
  }

  .span_1_of_2 p {
    max-width: 50%;
    height: auto;
  }
}
/*  SECTIONS  ============================================================================= */

.section {
  clear: both;
  padding: 0px;
  margin: 0px;
}

.section {
  /*height:300px;*/
  display: flex;
}

/*  GROUPING  ============================================================================= */

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

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
  position: relative;
  margin: 1% 0 1% 1.6%;
  padding-bottom: 40px;
}

.col:first-child {
  margin-left: 0;
} /* all browsers except IE6 and lower */

.


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
  .col {
    margin: 1% 0 1% 0%;
  }
}

.button {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
}

.imghome {
  max-width: 100%; /*  resizes the image */
  height: auto;
}

试试这个：

查看演示here

HTML：

.span_1_of_2 p {
    max-width:300px;
    margin: 0 auto;
}

Answer 3

您可以使用媒体查询。这是一种使 Web 响应式的 CSS 技术。