响应 - 2列的间距

Question

我有一个问题，我想制作两列并具有响应效果。 左栏有2个部分，顶部是文字，下面是图片。右边是图像。但它在2列之间有很大的间距。如果设置填充或边距，当响应不会向左浮动。非常感谢你。

＆＃13;

＆＃13;

@charset "utf-8";
/* CSS Document */

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body { margin: 0; }

.columnsContainer { position: relative; margin: .5em; }

.leftColumn, .rightColumn{  border: 1px solid  #ccc; padding: 1.25em; }

.leftColumn { margin-bottom: .5em; }



/* MEDIA QUERIES */
@media screen and (min-width: 47.5em ) {
  .leftColumn { margin-right: 19.5em; }

	.rightColumn { position: absolute; top: 0; right: 0; width: 18.75em; }   
}



.leftColumn img{
	    margin-top: 27px;
} 
.leftColumn {
        float: left;
    	width: 67%;
    }
    .rightColumn {
		float: left;
    	width: 37%;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    .group:after {
        content:"";
        display: table;
        clear: both;
    }
    @media screen and (max-width: 480px) {
        .leftColumn, .rightColumn {
            float: none;

			.navigation  {
  background-color:#fff;
  padding:0;

}

＆＃13;

  <link rel="stylesheet" href="css.css">
<nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="navigation">
        <div class="container">

            <div class="leftColumn">
                <p> Fire safety is a principal concern for naval engineers. On-board fires often escalate quickly, causing massive damage to equipment, facilities and the environment. More importantly, they typically occur in remote areas where assistance is limited and serious injuries or loss of life unfortunately result. Vessel and offshore fires usually start in engine rooms, machinery, electrical controls and storage rooms. </p>
                <img src="img/marine/photo_1.jpg">
            </div>

            <div class="rightColumn">
                <img src="img/marine/photo_2.jpg" />
            </div>

        </div>
    </div>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 1

为什么你设置leftColumn有width 67%而右列有width 37%。它不适合容器。只需改变宽度。

    @charset "utf-8";

/* CSS Document */

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.columnsContainer {
  position: relative;
  margin: .5em;
}

.leftColumn,
.rightColumn {
  border: 1px solid #ccc;
  padding: 1.25em;
}

.leftColumn {
  margin-bottom: .5em;
  float: left;
  width: 65%;
}

.rightColumn {
  float: right width: 30%;
}


/* MEDIA QUERIES */

@media screen and (min-width: 47.5em) {
  .leftColumn {
    margin-right: 19.5em;
  }
  .rightColumn {
    position: absolute;
    top: 0;
    right: 0;
    width: 18.75em;
  }
}

.leftColumn img {
  margin-top: 27px;
}

.leftColumn {
  float: left;
  width: 65%;
}

.rightColumn {
  float: left;
  width: 30%;
}

img {
  max-width: 100%;
  height: auto;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 480px) {
  .leftColumn,
  .rightColumn {
    float: none;
    .navigation {
      background-color: #fff;
      padding: 0;
    }

<link rel="stylesheet" href="css.css">
<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="navigation">
    <div class="container">

      <div class="leftColumn">
        <p> Fire safety is a principal concern for naval engineers. On-board fires often escalate quickly, causing massive damage to equipment, facilities and the environment. More importantly, they typically occur in remote areas where assistance is limited
          and serious injuries or loss of life unfortunately result. Vessel and offshore fires usually start in engine rooms, machinery, electrical controls and storage rooms. </p>
        <img src="img/marine/photo_1.jpg">
      </div>

      <div class="rightColumn">
        <img src="img/marine/photo_2.jpg" />
      </div>



    </div>
  </div>
</nav>