Держите Divs в одной строке при изменении размера ответа

Question

У меня возникли проблемы с выяснением того, как держать мои divs в одной строке. Я хотел, чтобы все изображения оставались на одной линии, уменьшая/уменьшая размер, поскольку экран отрегулирован без переполнения или горизонтальной прокрутки. Каждое изображение представляет собой ссылку, в которой будет отображаться код 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; 
} 

Я проверил многочисленные вопросы здесь и просмотрел W3schools, но не могу найти решение.

Я считаю, что я делаю что-то не так с контейнером (извините, что я все еще новичок).

Спасибо,

Ричард

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();