Переупорядочить / заменить в адаптивной компоновке без изменения только CSS HTML

Я знаю, что это много, чтобы читать, но я надеюсь, что кто-то берет время, чтобы помочь мне. Спасибо!!!

Это pice моего кода с моего отзывчивого веб-сайта.

<!DOCTYPE html>
<html>
<head>
<style>
@media (max-width:1227px) and (min-width:769px) {
html    {
    background-color:rgba(228, 40, 40, 0.66);
}
#navigation_ul_left {
    padding-left:7px;
    padding-right:4px;
    list-style-type:none;
}
main    {
    margin-left:210px;
}
nav {
    width:200px;
    min-height:600px;
    position:absolute;
    border-style:solid;
    border-width:1px;
    border-color:black;
    margin-right:10px;
    background-color:white;
}
#book_cover {
    width:100%;
}
#book_informations  {
    display:table;
    width:100%;
}
#book_left  {
    margin-right:20px;
    float:left;
    width:300px;
    display:table-header-group;
}
#book_middle    {
    margin-right:20px;
    width:500px;
    float:left;
    display:table-footer-group;
}
#book_right {
    float:left;
    width:300px;
    border-style:solid;
    border-width:1px;
    padding:5px;
    display:table-row-group;
}
}
</style>
</head>
<body>

<nav class="navigation">
<ul id="navigation_ul_left">

<li class="li_navigation_left">Test1</li><br>
<li class="li_navigation_left">Test2</li><br>
<li class="li_navigation_left">Test3</li><br>
<li class="li_navigation_left">Test4</li><br>
<li class="li_navigation_left">Test5</li><br>
<li class="li_navigation_left">Test6</li><br>

</ul>
</nav>
<main>
<div id="book_informations">
<div id="book_left">
<img id="book_cover" src="http://lorempixel.com/g/400/200/">

<p>Test123ABC</p>
<p>Test456DEF</p>
<p>Test789GHI</p>
</div>

<div id="book_middle">
<p id="book_title">Lorem ipsum dolor sit amet.</p>
<p id="book_discription">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="book_right">
<div id="payment_div">

<p id="chose_payment">Das ist mein <a href="">Test-Text</a>.</p></div>

</div>
</div>
</main>
</body>
</html>

CSS предназначен для размещения между 769px и 1227px. В рамках этого измерения я хочу, чтобы макет выглядел так:

Это мой целевой макет!

Левый «столбец» в main (исключая навигацию на левой стороне) должен быть фиксированного размера, ca. 250 px. Правый » столбец «(big Lorem-ipsum-placeholder-text) должен быть переменным (возможно, ширина в %) и заполнять пространство между левым» столбцом » и правой границей браузера.

Проблема в том, что мне придется сделать это без изменения HTML-кода. Я могу изменить только код CSS.

Я пробовал это с display:table;, display:table-row-group;… но это не работает.

Кто-нибудь знает, что я делаю не так?

2 ответа

  1. То, что вам нужно использовать, — это @Media ruling в css, чтобы поддерживать оба разрешения и удостовериться, что ваш html адаптируется в зависимости от того, какое разрешение использует пользователь.

  2. пожалуйста, проверьте этот код

    <!DOCTYPE html>
    <html>
     <head>
    <style>
    
    html {
        background-color: rgba(228, 40, 40, 0.66);
    }
    
    #navigation_ul_left {
        padding-left: 7px;
        padding-right: 4px;
        list-style-type: none;
    }
    
    nav {
        width: 200px;
        min-height: 600px;
        position: absolute;
        border-style: solid;
        border-width: 1px;
        border-color: black;
        margin-right: 10px;
        background-color: white;
        float: left;
        clear: both;
    }
    
    #book_informations {
        width: 100%;
        float: left;
    }
    
    #book_left {
        margin-right: 3%;
        float: left;
        width: 25%;
        display: table-header-group;
    }
    
    main {
        width: 75%;
        float: left;
        margin-left: 230px;
    }
    
    #book_cover {
        width: 100%;
    }
    
    #book_middle {
        width: 70%;
        float: left;
        display: table-footer-group;
    }
    
    #book_right {
        float: left;
        width: 100%;
        border-style: solid;
        border-width: 1px;
        padding: 5px;
        display: table-row-group;
    }
    
    @media screen and (max-width: 768px) {
        #book_middle {
            margin-left: 2%;
    
        }
     }
    
    </style>
    </head>
    <body>
    
    <nav class="navigation">
    <ul id="navigation_ul_left">
    
    <li class="li_navigation_left">Test1</li>
    <br>
    <li class="li_navigation_left">Test2</li>
    <br>
    <li class="li_navigation_left">Test3</li>
    <br>
    <li class="li_navigation_left">Test4</li>
    <br>
    <li class="li_navigation_left">Test5</li>
    <br>
    <li class="li_navigation_left">Test6</li>
    <br>
    
    </ul>
    </nav>
    <main>
     <div id="book_informations">
    <div id="book_left">
        <img id="book_cover" src="200.jpg">
    
        <p>Test123ABC</p>
    
        <p>Test456DEF</p>
    
        <p>Test789GHI</p>
    
        <div id="book_right">
            <div id="payment_div">
                <p id="chose_payment">Das ist mein <a href="">Test-Text</a>.</p></div>
        </div>
    </div>
    
    <div id="book_middle">
        <p id="book_title">Lorem ipsum dolor sit amet.</p>
    
        <p id="book_discription">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
            ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
            fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
            deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
            sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
            id est laborum.</p>
    </div>
    
    
    </div>
    </main>
    </body>