5 способов отобразить два элемента div рядом с помощью CSS

 

CSS — это язык стилей. Среди них реализация двух элементов div рядом — очень распространенное требование. В этой статье будут представлены различные методы CSS для реализации параллельного отображения двух элементов div. Он имеет определенное ссылочное значение. Если вам интересно, вы можете об этом узнать.

 Метод 1: Float, float:left; остается плавающим влево, или его можно установить на float:right; плавать вправо, или два элемента div могут быть размещены рядом в одной строке.

#div1{
    width:50%;
    height:300px;
    background:blue;
    float:left;
}
#div2{
    width:50%;
    height:300px;
    background:green;
    float:left;
}

Способ 2: отображение:таблица-ячейка

#parent{
    width:100%;
    display:table;
}
#div1{
    width:50%;
    height:300px;
    background:blue;
    display:table-cell;
}
#div2{
    width:50%;
    height:300px;
    background:green;
    display:table-cell;
}

Метод 3: Отрицательная маржа

#parent{
    display:flex;
    overflow:hidden;
}
#div1{
    width:50%;
    height:300px;
    background:blue;
    padding-bottom:2000px;
    margin-bottom:-2000px;
}
#div2{
    width:50%;
    height:300px;
    background:green;
    padding-bottom:2000px;
    margin-bottom:-2000px;
}

Метод 4: Абсолютное позиционирование

*{
    margin:0;
    padding:0;
}
#div1{
    width:50%;
    height:300px;
    background:blue;
    position:absolute;
    left:0;
    top:0;
}
#div2{
    width:50%;
    height:300px;
    background:green;
    position:absolute;
    transform:translate(100%, 0);
}

Способ пятый: гибкий макет

#parent{
    display:flex;
}
#div1{
    width:50%;
    height:300px;
    background:blue;
    flex:1;
}
#div2{
    width:50%;
    height:300px;
    background:green;
    flex:1;
}

На этом завершается статья о различных методах использования CSS для отображения двух элементов div рядом. Надеюсь, это вам поможет.

Перепечатано из: Weidian Reading    https://www.weidianyuedu.com.