Сочетание CSS плавает и делит + Отзывчивый - PullRequest
Новая
       48

Сочетание CSS плавает и делит + Отзывчивый

0 голосов
/ 25 января 2019

Итак, я пытаюсь получить то, что я представляю себе, используя комбинацию float и divs , а также отзывчивого изображения для моего фон и текст. Здесь нужно сделать несколько шагов.

1. Первый из них, например, с отзывчивым изображением https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_full_page.

2. Второй будет с отзывчивым текстом https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text.

3. И, наконец, из приведенного ниже кода я хотел бы взять первый div для размещения сверху и второй div для размещения сверху нижний размер после изменения размера планшета / мобильного телефона.

3.1. В режиме планшета первый div и второй div могут оставаться в центре экрана, чтобы придать ему чистый вид, и затем, скажем, один раз в размере iPhone, текст h2 и абзац могут заполнить весь экран с левой стороны до правой стороны экрана.

ПРИМЕЧАНИЕ / К вашему сведению: Я планирую использовать первый div для изображения.

Вот откуда у меня появилась идея с этого форума, который получил большую помощь. Как центрировать два элемента div, плавающих рядом друг с другом . Мне нравится тот, который имеет 6 upvote, а затем я немного подправил его для себя, и я получил следующие результаты, которые мне понравились. Так что посмотрите здесь. Я больше учусь, потому что я вроде как парень. Так что я все еще изучаю HTML и CSS, и я не профессионал. Так что бонусом было бы, если бы вы могли ставить комментарии после точки с запятой, чтобы я знал, что делает каждая функция, это было бы здорово! Спасибо!

HTML 

#wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}
<!DOCTYPE html>
<html>

<head>
  <title>This is a test</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div id="wrapper" style="text-align:center;">

    <div style="float:left;background-color:red;width:50%">
      Lorem ipsum<br>dolor sit amet
    </div>

    <div style="float:right;background-color:blue;width:50%" ">
      Lorem ipsum<br>dolor sit amet
    </div>
    
  </div>


</body>

</html>

1 Ответ

0 голосов
/ 26 января 2019

Я думаю, это то, что вы ищете! Мне очень понравилось использовать Flex для подобных задач. 

body
{
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

#wrapper
{
  position: relative;
  width: 50%;
  margin: auto;
  background: black;
  display: flex;
  align-item: center;
  flex-direction: row;
}

img
{
width: 100%;
height: auto;
display: block; /*Gets Rid Of Spacing Under Images*/
}

#color1 {background: red;}
#color2 {background: blue;}

.box
{
  flex-basis: 50%;
  box-sizing: border-box;
}

@media (max-width: 750px){
  #wrapper
  {
    flex-direction: column;
  }
}
<body>

  <div id="wrapper" style="text-align:center;">

    <div id="color1" class="box">
      <img src="https://www.w3schools.com/howto/img_girl.jpg">
    </div>

    <div id="color2" class="box">
      Such A Beautiful Scene
    </div>
    
  </div>
...