У меня есть макет, и я пытаюсь добавить в ряд изображений, которые будут сидеть под секцией «только что прибыли», и независимо от того, что я пытаюсь, изображения продолжают течь под друг другом.Ответные изображения не течет правильно
Может ли кто-нибудь увидеть, что я делаю неправильно? Благодаря!
Это потому, что <li> элементов - display: block по умолчанию. Дайте им float: left, и все готово.
.wrap {
float: left;
}
Привет, спасибо за ваше предложение. Я попробовал float влево, но тогда изображения не попадают в большие окна, когда экран становится меньше, как и другие изображения на странице.Кто-то предложил использовать некоторые divs, и я попробовал это, но поля все выключены: https://jsfiddle.net/5cripted/v2qfsnqz/. Кажется, я не могу получить только что прибыли, а изображения ниже - правильно подобрать. – 5cripted
Они текут друг под другим, потому что каждое изображение обернуто с блочным элементом, в данном случае <div>. Удалите div или установите его отображаемое значение на inline-block.
Меньшие изображения имеют отображаемое значение list-item, которое позиционирует элементы как вертикальный список.
встроенный блок
.wrapper {
text-align: left;
}
.wrapper a {
display: inline-block;
}<div class="wrapper">
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
</div>блок дисплея и плавает
/* Clearfix */
.wrapper::after {
content: ''
clear: both;
display: table;
}
.wrapper a {
display: block;
float: left;
}
img {
/* Fixes whitespace below each image */
display: block;
}<div class="wrapper">
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
</div>Flexbox
Используйте это, если вам не нужно поддерживать старые версии Internet Explorer (< 11).
/* Clearfix */
.wrapper {
display: flex;
flex-wrap: wrap;
}
.wrapper a {
width: 50%;
}
img {
/* Stretch the image for demo purposes */
width: 100%;
/* Fixes whitespace below each image */
display: block;
}<div class="wrapper">
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
</div>Привет, спасибо за ваше предложение. Я попробовал float влево, но тогда изображения не попадают в большие окна, когда экран становится меньше, как и другие изображения на странице. Кто-то предложил использовать некоторые divs, и я попробовал это, но поля все выключены: https://jsfiddle.net/5cripted/v2qfsnqz/. Кажется, я не могу получить только что прибыли, а изображения ниже - правильно подобрать. – 5cripted
@ 5cripted: добавлены некоторые примеры кода – marvinhagemeister
Я написал небольшой код для вас. Проверь это.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
height: auto;
}
div.imagecontainer
{
\t width: 100%;
\t height: auto;
\t
}
div.imagecontainer ul {
\t width: 100%;
\t height: 100%;
\t padding:0;
}
div.imagecontainer ul li{
\t list-style-type: none;
\t width: 20%;
\t height: 200px;
\t float: left;
}
div.imagecontainer ul li img
{
\t width: 100%;
\t height: 100%;
}
</style>
<body>
<div class="imagecontainer">
<ul>
\t <li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li>
\t <li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li>
\t <li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-Blaithin_f3f568d3-849a-4271-a640-b2517965adda.jpg?16480572688008041262"></li>
\t <li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li>
\t <li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li>
\t
</ul>
</div>
<script type="text/javascript">
$(window).resize(function(){
\t //alert("resizing");
var windowWidth = $(window).width();
if(windowWidth < 600)
{
\t $("div.imagecontainer ul li").css({"width":"100%","height":"400px"});
}
else
{
\t $("div.imagecontainer ul li").css({"width":"20%","height":"200px"});
}
});
</script>
</body>
</html>, но я использовал небольшой JQuery. вы можете изменить условия, и я использовал все css ans js внутренне.
Другие вещи width и heidht и другие вещи зависят от вашей потребности в изменении тех (количество изображений, которые вы решили поместить в линию), как вам нужно.
Я думаю, что это может не соответствовать 100% вашим потребностям. Я рекомендую использовать бутстрап. скопируйте прошлое и попробуйте this.hope, это поможет вам.
Изображения, похоже, не сохраняют соотношение сторон. Они кажутся раздавленными для меня. – marvinhagemeister
Мой код: https://jsfiddle.net/5cripted/9qyjhjto/2/. Я пытаюсь получить макет, похожий на: https://jsfiddle.net/5cripted/sz4k9pv5/, но я не могу заставить его работать. – 5cripted