0

введите сюда описание изображения

border который по середине

Помогите выровнять, уже много чего перепробовал, но не получалось. :с

CSS код этого border.

#test3 {
  text-align: center;
  background-color: #CCCCCC;
  color: black;
  border: 6px solid #FFFFCC;
  border-radius: 15px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  font-size: 20px;
  font-weight: 300;
  padding: 15px;
  margin: 20px;
}

https://jsfiddle.net/3gp8znce/

3
  • Разметку хотя бы добавьте, чтобы люди могли поиграться с ней
    – MegaRoks
    29 июл 2019 в 9:32
  • О каком бордере идет речь? И в каком плане обрезать? 29 июл 2019 в 9:40
  • HTML тоже приложите, не вручную же нам все верстать
    – MegaRoks
    29 июл 2019 в 9:40

2 ответа 2

0

Если я правильно понял вопрос автора

#test {
  float: left;
  text-align: left;
  background-color: #CCCCCC;
  color: black;
  padding: 15px;
  margin: 20px;
  border: 6px solid #FFFFCC;
  border-radius: 15px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  width: 200px;
  height: 570px;
  font-size: 20px;
  font-weight: 300;
}

#test2 {
  float: right;
  text-align: left;
  background-color: #CCCCCC;
  color: black;
  border: 6px solid #FFFFCC;
  border-radius: 15px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  width: 200px;
  height: 300px;
  font-size: 20px;
  font-weight: 300;
  padding: 15px;
  margin: 20px;
}

#test3 {
  text-align: center;
  background-color: #CCCCCC;
  color: black;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  font-size: 20px;
  font-weight: 300;
  padding: 0px 15px 0px 15px;
  margin: 20px;
  z-index: 1;
}

#inner {
  width: 50%;
  border-top: 6px solid #FFFFCC;
  border-bottom: 6px solid #FFFFCC;
  margin: auto;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Site</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="test">
    HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки»)
    — стандартизированный язык разметки документов во Всемирной паутине.
    Большинство веб-страниц содержат описание разметки на языке HTML (или 
    XHTML). Язык HTML интерпретируется браузерами; полученный в результате 
    интерпретации форматированный текст отображается на экране монитора 
    компьютера или мобильного устройства.
  </div>

  <div id="test2">
    Язык HTML до 5-й версии определялся как приложение SGML (стандартного
    обобщённого языка разметки по стандарту ISO 8879). Спецификации HTML5
    формулируются в терминах DOM (объектной модели документа).
  </div>

  <div id="test3">
    <div id='inner'>
      Язык гипертекстовой разметки HTML был разработан британским учёным Тимом
      Бернерсом-Ли приблизительно в 1986—1991 годах в стенах ЦЕРНа в Женеве в
      Швейцарии. HTML создавался как язык для обмена научной и технической
      документацией, пригодный для использования людьми, не являющимися 
      специалистами в области вёрстки. HTML успешно справлялся с проблемой
      сложности SGML путём определения небольшого набора структурных и 
      семантических элементов — дескрипторов. Дескрипторы также часто называют
      «тегами». С помощью HTML можно легко создать относительно простой, но 
      красиво оформленный документ. Помимо упрощения структуры документа, в 
      HTML внесена поддержка гипертекста. Мультимедийные возможности были
      добавлены позже.
    </div>
  </div>
</body>

</html>

8
  • Я хочу обрезать border с лева и с права, что бы он не заходил за другие рамки. 29 июл 2019 в 9:51
  • У блоков test и test3?
    – MegaRoks
    29 июл 2019 в 9:53
  • Обрезать нужно только test3 29 июл 2019 в 9:54
  • Обрезал у test3 border с лева и с права. Чего вы хотите добиться?
    – MegaRoks
    29 июл 2019 в 10:02
  • Добавил скрин того, что хочу сделать. 29 июл 2019 в 10:05
0

Все контенты адаптированы, копируйте и посмотрите на большом экране

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  padding: 10px;
  margin: 20px;
  background: #CCCCCC;
  border: 2px solid #FFFFCC;
  /* 	Тут можно включить бордер
    border-radius: 5px;
    box-shadow: 0 0 5px 0 ;
    box-shadow: 0 0 10px 0 #333;
   */
  .midle-content {
    flex: 1 0 0;
    padding: 10px;
  }
  .left-content,
  .right-content {
    flex: 0 0 250px;
    padding: 10px;
    border: 2px solid #FFFFCC;
    border-radius: 5px;
    box-shadow: 0 0 10px 0 #333;
  }
}

@media screen and (max-width: 992px) {
  .container {
    flex-direction: column;
    .midle-content {
      border: 2px solid #FFFFCC;
      border-radius: 5px;
      box-shadow: 0 0 10px 0 #333;
      margin-bottom: 20px;
      padding: 20px 10px;
    }
    .left-content,
    .right-content {
      flex: 0 0 auto;
      margin-bottom: 20px;
      padding: 20px 10px;
    }
  }
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="container">
    <p class="left-content">
      HTML (от англ. HyperText Markup Language — «язык гипертекстовой 
      разметки») — стандартизированный язык разметки документов во Всемирной
      паутине. Большинство веб-страниц содержат описание разметки на языке 
      HTML (или XHTML). Язык HTML интерпретируется браузерами; полученный в
      результате интерпретации форматированный текст отображается на экране
      монитора компьютера или мобильного устройства.
    </p>
    <p class="midle-content">
      Язык гипертекстовой разметки HTML был разработан британским учёным Тимом
      Бернерсом-Ли приблизительно в 1986—1991 годах в стенах ЦЕРНа в Женеве в
      Швейцарии. HTML создавался как язык для обмена научной и технической 
      документацией, пригодный для использования людьми, не являющимися 
      специалистами в области вёрстки. HTML успешно справлялся с проблемой 
      сложности SGML путём определения небольшого набора структурных и 
      семантических элементов — дескрипторов. Дескрипторы также часто называют
      «тегами». С помощью HTML можно легко создать относительно простой, но 
      красиво оформленный документ. Помимо упрощения структуры документа, в
      HTML внесена поддержка гипертекста. Мультимедийные возможности были 
      добавлены позже.
    </p>
    <p class="right-content">
      Язык HTML до 5-й версии определялся как приложение SGML (стандартного
      обобщённого языка разметки по стандарту ISO 8879). Спецификации HTML5
      формулируются в терминах DOM (объектной модели документа).
    </p>
  </div>
</body>

</html>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.