CSS Help Needing with Positioning and Wrapping Elements

Question

В настоящее время я создаю мобильное приложение с помощью jQuery Mobile, но попал в стену из-за отсутствия понимания CSS.

Мне нужна помощь в стилизации средней части прототипа, которая, как я полагаю, состоит из нескольких div, которые перекрывают друг друга с использованием относительного и абсолютного позиционирования.

Должен ли я начинать с обертки, чтобы содержать изображение Дональда Трампа и вводить другие divs для позиционирования над изображением? Со всеми листами на месте, я группирую их вместе, чтобы они последовательно смотрели на любые мобильные устройства? если да, то как? Я был бы признателен, если кто-то сможет объяснить с помощью CSS-кода, как добиться стиля, показанного в прототипе.

Answer 1

Конечно, есть несколько вариантов для достижения конкретного вида ваших стремитесь. Это возможность, которая имеет следующие преимущества:

• использование специфических тегов HTML для разделов (например, <article>, <header> и т.д.), а не родовые див, которая поощряется.

• удобный ::after css селектор, который позволяет вам что-то программно добавлять к существующим элементам непосредственно из css. В этом случае черный квадрат.

• относительное позиционирование элементов с position: relative. Это позволяет перемещать часть статьи относительно ее «нормального» положения, чтобы она совпадала с изображением.

• ширина определяется в процентах, с width: 90%, гарантируя, что изделие, которое накладывается на изображение, всегда немного тоньше, чтобы добиться желаемого внешнего вида.

• translate Свойство css, которое позволяет сдвинуть черный квадрат на 50% от его собственной ширины, поэтому он идеально по центру (без свойства перевода, левая сторона черного квадрата будет центрирована, а не центр квадрата центрирован).

Я рекомендую вам поиграть с приведенным ниже примером, чтобы получить представление о влиянии каждого правила CSS на макет.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    max-width: 500px; 
 
    margin: auto; 
 
    text-align: center; 
 
    background: white; 
 
} 
 
.image { 
 
    margin-top: 10px; 
 
    background: url('https://fortunedotcom.files.wordpress.com/2017/01/trump2_thumb.jpg') top center no-repeat; 
 
    background-size: cover; 
 
    min-height: 250px; 
 
} 
 
.image_overlap { 
 
    border-top: 5px solid red; 
 
    padding-top: 40px; 
 
    position: relative; 
 
    top: -40px; 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    background: white; 
 
} 
 
.image_overlap:after { 
 
    content: '1'; 
 
    background: black; 
 
    position: absolute; 
 
    color: white; 
 
    width: 50px; 
 
    height: 50px; 
 
    top: 0; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<header> 
 
    <h1>Top Stories</h1> 
 
    <h2>from the world of evil</h2> 
 
</header> 
 

 
<main> 
 
    <div class="image"></div> 
 
    <article class="image_overlap"> 
 
    <p>#AMERICA</p> 
 
    <br> 
 
    <h3>How the WWIII <br>Took Place Last Night</h3> 
 
    </article> 
 
</main>