応答するとリサイズ時にDivsを同じ行に保ちます

Question

同じ行にdivを保持する方法を理解できません。オーバーフローや水平スクロールを行わずに画面を調整したときに、すべての画像を同じ行に残して、サイズを縮小/拡大したかったのです。各画像は、隠し文字を表示するためにjavascriptコードが実行されるリンクです。 My website

私はすべての私のコードのためにjsfiddleを作成しました：jsfiddle code

HTMLコード：

<ul class="tab"> 
    <li> 
    <a href="javascript:void(0)" class="tabimg" onclick="openTab(event, 'Newborns')"> 
     <img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt=""> 
    </a> 
    </li> 
    <li> 
    <a href="javascript:void(0)" class="tabimg" onclick="openTab(event, 'Children')"> 
     <img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt=""> 
    </a> 
    </li> 
    <li> 
    <a href="javascript:void(0)" class="tabimg" onclick="openTab(event, 'Families')"> 
     <img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt=""> 
    </a> 
    </li> 
    <li> 
     <a href="javascript:void(0)" class="tabimg" onclick="openTab(event, 'Lifestyle')"> 
     <img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt=""> 
    </a> 
    </li> 
</ul> 

<div id="Newborns" class="tabcontent"> 
    <h3>Newborns</h3> 
    <p>London is the capital city of England.</p> 
</div> 

<div id="Children" class="tabcontent"> 
    <h3>Children</h3> 
    <p>Paris is the capital of France.</p> 
</div> 

<div id="Families" class="tabcontent"> 
    <h3>Families</h3> 
    <p>Tokyo is the capital of Japan.</p> 
</div> 

<div id="Lifestyle" class="tabcontent"> 
    <h3>Lifestyle</h3> 
    <p>Tokyo is the capital of Japan.</p> 
</div> 

CSS

ここ

は問題があるサイトです

/* Style the list */ 
ul.tab { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    border: 1px solid #ccc; 
    background-color: #f1f1f1; 
    text-align: center; 
} 

/* Float the list items side by side */ 
ul.tab li { 
    float: left; 
} 

/* Style the links inside the list items */ 
ul.tab li a { 
    display: inline-block; 
    color: black; 
    text-align: center; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
} 

/* Change background color of links on hover */ 
ul.tab li a:hover { 
    background-color: #ddd; 
} 

/* Create an active/current tablink class */ 
ul.tab li a:focus, .active { 
    background-color: #ccc; 
} 

/* Style the tab content */ 
.tabcontent { 
    display: none; 
    padding: 6px 12px; 
    border: 1px solid #ccc; 
    border-top: none; 
} 

/*style the images*/ 
.tabimg{ 
    max-width: 100%; 
    height: auto; 
    border: 3px solid blue; 
} 

ここで数多くの質問をチェックし、W3スクールを精査しましたが、解決策が見つかりませんでした。

私はコンテナに何か間違っていると思います（私はまだ初心者です）。

は

Answer 1

リチャード、すべてのクレジットをありがとうjsfiddleを作成したトミー・シュミットに行く：jsFiddle created by Tommy

リンクが今まで答えはまだ利用できます死ぬので、もし私は、コードを投稿します将来的には、それを必要とするかもしれない人のために：

HTML：

<ul class="tab"> 
    <li> 
    <a href="#" class="tabimg" data-city-name="Newborns"> 
     <img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt=""> 
    </a> 
    </li> 
    <li> 
    <a href="#" class="tabimg" data-city-name="Children"> 
     <img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt=""> 
    </a> 
    </li> 
    <li> 
    <a href="#" class="tabimg" data-city-name="Families"> 
     <img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt=""> 
    </a> 
    </li> 
    <li> 
    <a href="#" class="tabimg" data-city-name="Lifestyle"> 
     <img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt=""> 
    </a> 
    </li> 
</ul> 

<div id="Newborns" class="tabcontent"> 
    <h3>Newborns</h3> 
    <p>London is the capital city of England.</p> 
</div> 

<div id="Children" class="tabcontent"> 
    <h3>Children</h3> 
    <p>Paris is the capital of France.</p> 
</div> 

<div id="Families" class="tabcontent"> 
    <h3>Families</h3> 
    <p>Tokyo is the capital of Japan.</p> 
</div> 

<div id="Lifestyle" class="tabcontent"> 
    <h3>Lifestyle</h3> 
    <p>Tokyo is the capital of Japan.</p> 
</div> 

CSS：

/* Style the list */ 

ul.tab { 
    whitespace: nowrap; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    border: 1px solid #ccc; 
    background-color: #f1f1f1; 
    text-align: center; 
} 

/* Style the a tags */ 
ul.tab li a { 
    display: inline-block; 
    color: black; 
    text-align: center; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
} 


/* Change background color of links on hover */ 

ul.tab li a:hover { 
    background-color: #ddd; 
} 


/* Create an active/current tablink class */ 

ul.tab li a:focus, 
.active { 
    background-color: #ccc; 
} 


/* Style the tab content */ 

.tabcontent { 
    display: none; 
    padding: 6px 12px; 
    border: 1px solid #ccc; 
    border-top: none; 
} 


/*style the images*/ 

.tabimg { 
    box-sizing: border-box; 
    border: 3px solid blue; 
} 

.tab { 
    font-size: 0; /* To get rid of the space below the li tags */ 
    display: inline-block; 
    /* change this to display: block; in order to make the container as wide as the page is */ 
    box-sizing: border-box; 
    overflow: hidden; 
    /* to clear the float */ 
} 

.tab li { 
    box-sizing: border-box; 
    float: left; 
    width: 25%; 
} 

.tab li a { 
    width: 100%; /* remove this if you dont want the images to resize if the container is as wide as the page (if .tab is display: block;*) */ 
} 

.tab li img { 
    width: 100%; 
    display: block; 
    box-sizing: border-box; 
} 

Javascriptを：

/* Simple foreach as the js foreach method is not supported by IE9 and you may want to support it. 
CanIUse: http://caniuse.com/#search=foreach */ 
function simpleForEach(array, callback) { 
    for (var i = 0; i < array.length; i++) { 
    callback(array[i], i); 
    } 
}; 

/* Parts of this can be done with pure css. 
This function should executed on load: 
    document.addEventListener("load", load); 
or on DOMContentLoaded: 
    document.addEventListener("DOMContentLoaded", load); 
CanIUse: http://caniuse.com/#search=DOMContentLoaded. */ 
function load() { 
    var tabimgs = document.getElementsByClassName("tabimg"); 
    // for each tabimg 
    simpleForEach(tabimgs, function(tabimg) { 
    var cityName = tabimg.getAttribute("data-city-name"); 
    // add the click event listener 
    tabimg.addEventListener("click", function(evt) { 
     // onclick do: 
     // hide all tabcontents 
     simpleForEach(document.getElementsByClassName("tabcontent"), function(tc) { 
     tc.style.display = "none"; 
     }); 
     // remove the active class 
     simpleForEach(document.getElementsByClassName("tabimg"), function(ti) { 
     ti.className = ti.className.replace(" active", ""); 
     }); 
     // show the current tab, and add "active" class to the link that opened the tab 
     document.getElementById(cityName).style.display = "block"; 
     tabimg.className += " active"; 
    }); 
    }); 
}; 
// in order to make it work in jsfiddle 
load();