Сделать правильную разметку

04 марта 2022, 23:20

Я плохо умею пользоваться css. Пожалуйста, помогите сделать разметку, как на рисунке.

1 - список тэгов input (type="radio")

2 - блок

3 - текст

Чёрная линия - тэг hr

Нужно, чтобы 1 и 2 элементы можно было пролистывать, а чёрная линия и 3 - всегда были на месте. И я бы хотел как-то украсить список 1, а то вообще плохо будет смотреться.

Спасибо за помощь!

Answer 1

as you wish

html, 
body { 
    height: 100vh; 
    margin: 0; 
    padding: 0; 
} 
 
.wrapper { 
    display: flex; 
    flex-direction: column; 
} 
 
.block { 
    overflow: auto; 
    display: flex; 
    flex-grow: 1; 
    overflow: auto; 
    height: 80vh; 
} 
 
.left { 
    margin-right: 3px; 
    border-right: 3px solid red; 
    min-width: 30%; 
    position: relative; 
} 
 
.right { 
    border-left: 3px solid red; 
     
} 
 
.list { 
    list-style: none; 
    padding: 0; 
} 
 
.bottom { 
    text-align: center; 
    background: white; 
} 
 
.bottom>hr { 
    margin: 0; 
    height: 3px; 
    background: black; 
} 
 
.bottom>p { 
    padding: 3px; 
    margin: 3px; 
    float: right; 
    border: 3px solid red; 
    color: red; 
    font-size: 30px; 
    min-width: 100px; 
} 
 
.num { 
    font-size: 60px; 
    color: red; 
    position: absolute; 
    left: calc(50% - 20px); 
    top: 10%; 
}

<div class="wrapper"> 
    <div class="block"> 
        <div class="left"> 
            <ul class="list"> 
                <li class="list__item"> 
                    <input type="radio" id="radio1" name="menu"> 
                    <label for="radio1">radio 1</label> 
                </li> 
                <li class="list__item"> 
                    <input type="radio" id="radio2" name="menu"> 
                    <label for="radio2">radio 2</label> 
                </li> 
                <li class="list__item"> 
                    <input type="radio" id="radio3" name="menu"> 
                    <label for="radio3">radio 3</label> 
                </li> 
            </ul> 
        </div> 
        <div class="right"> 
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi cum ratione dolorem pariatur omnis ipsam quos aliquam iusto! Quo optio deleniti dolore nostrum enim libero ratione magnam aspernatur beatae exercitationem.</p> 
<p>Voluptate alias tempore quod vel, voluptatem minus iste debitis esse architecto, fugiat eius consectetur corrupti. Sint voluptatem modi commodi vero, earum reiciendis, temporibus aperiam ea recusandae dolorem voluptas cum quisquam!</p> 
<p>Commodi ullam laudantium alias tenetur quod assumenda, nulla unde reprehenderit nam vitae magni! Distinctio autem odit libero alias rerum, mollitia quisquam, tempore recusandae est hic nesciunt eos nam enim ullam!</p> 
<p>Error fuga laudantium magni dolorum natus hic eos! Qui fugit illo facere excepturi necessitatibus rem, maxime ipsam odio totam natus deleniti. Natus quos quis laudantium placeat perferendis rerum, atque at!</p> 
<p>Accusamus aspernatur tempore perferendis. Explicabo earum cum molestias nobis, nemo laborum quia rerum dolores ad unde molestiae, pariatur blanditiis cupiditate tempora perspiciatis non aperiam esse ipsam doloribus mollitia quasi impedit!</p> 
<p>Totam illum dolorum fuga alias nostrum velit laboriosam expedita maiores ut, incidunt adipisci est voluptatem voluptate ex natus, sit assumenda quas aliquam tempore ipsum soluta officia ea! Atque, laudantium aperiam.</p> 
<p>Itaque minima, dolorem vitae iusto omnis doloribus dolores similique repellat totam tenetur consequatur? Distinctio vero doloribus cum hic, dolore explicabo dolores earum voluptate ab perferendis quas quidem ullam consectetur excepturi!</p> 
<p>Accusamus saepe fugiat aut laudantium molestias iure quasi, nulla tempora aspernatur quis commodi aliquam minima cumque adipisci placeat quae, omnis obcaecati ratione ipsa hic alias. Totam inventore modi magnam quae.</p> 
<p>Saepe, nihil quidem qui magnam incidunt vel blanditiis, inventore tempora repellendus non molestias animi, facilis voluptates sit iure. Eaque iusto, iste consequatur quaerat in atque. Nesciunt adipisci quam aliquam quos!</p> 
<p>Optio quo ullam mollitia iusto qui! Blanditiis dignissimos dolorum aliquid impedit natus obcaecati esse corporis voluptatibus qui non ducimus perferendis repellat expedita totam animi eaque corrupti, laudantium odio incidunt unde.</p> 
        </div> 
    </div> 
    <div class="bottom"> 
        <hr noshade> 
        <p>some text</p> 
    </div> 
</div>

Answer 2

Не советую вам пользоваться тэгом hr
Чтобы уметь позиционировать элементы, надо понимать, что такое DOM.

Создайте для каждого элемента и присвойте им классы, либо id.

Чтобы можно было пролистывать - используйте overflow:auto;.

Не стесняйтесь показывать свой код, чтобы было проще понять чего вы хотите и какими знаниями обладаете.

Answer 3

Вариантов может быть миллион. Но для того, чтобы решать поставленные задачи, необходимы знания и опыт. И конечно понимать саму задачу, знать, что вам конкретно нужно. И никто кроме вас лучше не реализует поставленную вами задачу, чем вы сами, потому как никто не может знать, что вы хотите получить в результате. Более того, вы будете получать огромное удовольствие от того, что вы самостоятельно создаете что-то полезное и красивое. Желаю успехов!

.wrapper { 
  position: relative; 
  width: 100%; 
} 
 
.wrap { 
  position: relative; 
  overflow: hidden; 
  width: 100%; 
  height: 200px; 
  padding-bottom: 20px; 
  margin-bottom: 20px; 
  border-bottom: 3px solid black; 
} 
 
.wr__radio { 
  position: relative; 
  float: left; 
  overflow: auto; 
  width: 20%; 
  height: 200px; 
  border: 3px solid red; 
} 
 
.wr__block { 
  position: relative; 
  float: right; 
  overflow: auto; 
  width: 75%; 
  height: 200px; 
  border: 3px solid red; 
} 
 
.wr__text { 
  position: relative; 
  overflow: hidden; 
  float: right; 
  width: 20%; 
  height: 30px; 
  border: 3px solid red; 
} 
 
.wr__radio img { 
  display: block; 
  margin-top: -120px; 
  margin-left: -60px; 
} 
 
.wr__block img { 
  display: block; 
  margin-top: -100px; 
  margin-left: -350px; 
} 
 
.wr__block img { 
  display: block; 
  margin-top: -100px; 
  margin-left: -350px; 
} 
 
.wr__text img { 
  display: block; 
  margin-top: -525px; 
  margin-left: -800px; 
} 
 
span { 
  font-size: 30px; 
  line-height: 30px; 
  color: red; 
  font-family: cursive; 
}

<div class="wrapper"> 
  <div class="wrap"> 
    <div class="wr__radio"><span>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br></span> 
    </div> 
    <div class="wr__block"><span>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br></span></div> 
  </div> 
  <div class="wr__text"><span>3</span></div> 
</div>

Или такой вариант:

.wrapper { 
  position: relative; 
  width: 100%; 
  padding-bottom: 40px; 
} 
 
.wrap { 
  position: relative; 
  overflow: hidden; 
  width: 100%; 
  height: 1000px; 
} 
 
.wrap:before { 
  content: ""; 
  z-index: 1; 
  position: fixed; 
  bottom: 0; 
  right: 0; 
  left: 0; 
  width: 100%; 
  height: 50px; 
  background-color: white; 
  border-top: 3px solid black; 
} 
 
.wr__radio { 
  position: relative; 
  float: left; 
  overflow: hidden; 
  width: 20%; 
  height: 1000px; 
  border: 3px solid red; 
} 
 
.wr__block { 
  position: relative; 
  float: right; 
  overflow: hidden; 
  width: 75%; 
  height: 1000px; 
  border: 3px solid red; 
} 
 
.wr__text { 
  position: fixed; 
  z-index: 2; 
  overflow: hidden; 
  bottom: 10px; 
  right: 8px; 
  width: 20%; 
  height: 30px; 
  border: 3px solid red; 
} 
 
.wr__radio img { 
  display: block; 
  margin-top: -120px; 
  margin-left: -60px; 
} 
 
.wr__block img { 
  display: block; 
  margin-top: -100px; 
  margin-left: -350px; 
} 
 
.wr__block img { 
  display: block; 
  margin-top: -100px; 
  margin-left: -350px; 
} 
 
.wr__text img { 
  display: block; 
  margin-top: -525px; 
  margin-left: -800px; 
} 
 
span { 
  font-size: 30px; 
  line-height: 30px; 
  color: red; 
  font-family: cursive; 
}

<div class="wrapper"> 
  <div class="wrap"> 
    <div class="wr__radio"><span>1</span> 
    </div> 
    <div class="wr__block"><span>2</span></div> 
  </div> 
  <div class="wr__text"><span>3</span></div> 
</div>