2列の応答性 -

Question

私は問題がある、私は2つの列を作って、応答効果があります。 左の列には2つの部分があり、上にテキストがあり、下にイメージがあります。右の部分は画像です。しかし、それは2つの列の間に大きな間隔を持っています。応答が左に浮かないときは、パディングまたは余白を設定します。どうもありがとうございます。あなたがleftColumnを設定するのはなぜ

@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; } 
 

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

 

 

 
.leftColumn img{ 
 
\t  margin-top: 27px; 
 
} 
 
.leftColumn { 
 
     float: left; 
 
    \t width: 67%; 
 
    } 
 
    .rightColumn { 
 
\t \t float: left; 
 
    \t 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; 
 

 
\t \t \t .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>

Answer 1

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>