Question

因此，我试图结合使用 floats 和 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。最后，从下面的代码中，我想将第一格放在顶部，将第二格一旦调整为平板电脑/手机尺寸，便可以堆叠在底部。

3.1。在平板电脑模式下，第一格和第二格可以留在屏幕中央以使其干净外观，然后说出iPhone的大小，文字h2和段落可以从屏幕的左侧一直到右侧填充整个屏幕。

注意/仅供参考： 我打算将第一个div用于图像。

在这里，我从这个论坛上得到了很多帮助。 How to center two divs floating next to one another。我喜欢具有6个赞成票的那个，然后我自己做了一些调整，得到了我喜欢的以下结果。所以在这里看看。当我喜欢某个人时，我更是一种学习。所以我仍然在学习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>

Answer 1

我认为这就是您要寻找的！我已经非常喜欢使用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>

CSS浮点数和div组合+自适应

1 个答案: