Отображение неупорядоченного списка и изображения рядом друг с другом

Question

Я создаю веб-сайт и хотел бы использовать отзывчивый дизайн. Все, что я хочу сделать, это отобразить неупорядоченный список элементов и изображение справа (рядом) <ul>, и когда пользователь изменяет размер страницы или просматривает ее на мобильном устройстве, изображение должно появиться ниже <ul>.

Я попытался изменения display стиль моих дивы, которые разместятся в <ul> и образ, но он по-прежнему не работает:

<div style="display:table"> 
 
    <div style="display:table-cell; vertical-align:top;"> 
 
    <ul> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
    </ul> 
 
    </div> 
 
    <div style="display:table-cell;float:right;"> 
 
    <img src="Images/Image1.jpg" /> 
 
    </div> 
 
</div>

Answer 1

Вы можете использовать Flexbox для выравнивания элементов, затем используйте мультимедийный запрос, чтобы изменить свойство отображения для меньших экранов (измените 320 пикселей на любую ширину для точки останова).

.flexcontainer { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
@media (max-width: 320px) { 
 
    .flexcontainer { 
 
    display: block; 
 
    } 
 
}

<div class="flexcontainer"> 
 
    <div> 
 
    <ul> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
    </ul> 
 
    </div> 
 
    <div> 
 
    <img src="http://lorempixel.com/image_output/nature-q-c-120-120-1.jpg" /> 
 
    </div> 
 
</div>

Answer 2

Добавить float типа как к ul и img. Затем добавьте минимальную длину к вам ul, максимальная ширина которой вы хотите, чтобы изображение находилось под ul.

<ul style="float: left; min-width: 500px; border-right: solid 1px;"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
    </ul> 
 
    <img src="Images/Image1.jpg" style="float: left;" />

Answer 3

Используйте следующий код:

для HTML:

<div style="display:table"> 
    <div class="design" style="display:table-cell; vertical-align:top;"> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
    </ul> 
    </div> 
    <div classstyle="display:table-cell;float:right;"> 
    <img src="Images/Image1.jpg" /> 
    </div> 
</div> 

для CSS:

.design{ 
float: left; 
} 

и избавиться от

float: right; 

Answer 4

Использование поплавка: левый как на список и изображения, чтобы выровнять изображение рядом со списком.

Как показано в следующем фрагменте.

.container { 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
} 
 
.row { 
 
    margin-left: -15px; 
 
    margin-right: -15px; 
 
    clear: both; 
 
    box-sizing: border-box; 
 
} 
 
.col-lg-8, 
 
.col-lg-4 { 
 
    float: left; 
 
    padding: 0 15px; 
 
} 
 
@media screen and (min-width: 760px) { 
 
    .col-lg-8 { 
 
    width: 66.66%; 
 
    } 
 
    .col-lg-4 { 
 
    width: 33.33%; 
 
    } 
 
} 
 
@media screen and (max-width: 760px) { 
 
    .col-lg-8 { 
 
    width: 100%; 
 
    } 
 
    .col-lg-4 { 
 
    width: 100%; 
 
    } 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-8"> 
 
     <ul class="list-holder"> 
 
     <li>Joey</li> 
 
     <li>Chandler</li> 
 
     <li>Ross</li> 
 
     </ul> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
     <div class="image-holder"> 
 
     <img src="http://stuffpoint.com/images/stuff-icon/friends.jpg" class="img-responsive"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

СЛОВО Непосредственно импортировать bootstrap для Отзывчивый веб-страницы.