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

Question

我有一个布局，它工作正常，除了一些小颠簸，我花了一整天的时间在上面工作，搜索谷歌，在这里，尝试其他布局，我什至尝试了 Bootstrap，但我一无所获.

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

但文本只是不合作。如果我解决了一件事，我就会破坏其他十件事。 我无法使文本整齐地保持在图像的比例内。我也不能设置高度，以便下面的按钮可以与其旁边的 div 内的按钮处于相同的基线。无论如何，如果我给你看会更好，所以这是 fiddler :

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;

}

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

我不能

例如

这个k

事情的真相。

感谢任何帮助。 谢谢。

Answer 1

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

.span_1_of_2 p{

    max-width:300px;
}

See updated fiddle