-3

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

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

2 - блок

3 - текст

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

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

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

3 ответа 3

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>

3
  • Спасибо, можно, чтобы только 1 и 2 блоки прокручивались, а 3 уже общая прокрутка не задевала?
    – user316324
    21 янв 2020 в 16:48
  • надо, чтобы 1 и 2 заканчивались в начале чёрной линии, а не заходили под неё
    – user316324
    22 янв 2020 в 17:18
  • @MaxNest бордеры уж сами как-нибудь пофиксите :)
    – xydope
    22 янв 2020 в 17:58
1
  1. Не советую вам пользоваться тэгом hr
  2. Чтобы уметь позиционировать элементы, надо понимать, что такое DOM.

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

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

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

1
  • Ну html то я понимаю, а в css даже понятия не имею, и не получается запомнить))
    – user316324
    21 янв 2020 в 16:44
0

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

.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>

2
  • Когда разворачиваю сниппет, вообще криво получается
    – user316324
    21 янв 2020 в 16:46
  • вот первый - i.ibb.co/Y2LMd0j/image.png второй - i.ibb.co/Snpn3vT/image.png ну во втором наверно из-за картинок, а первый точно криво
    – user316324
    22 янв 2020 в 17:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.