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

ind of thing。

感谢任何帮助。谢谢。

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技术。

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

3 个答案: