Question

这个问题已经存在了几天，并且无法绕过它。我正在构建一个桌面第一的响应式网页，其中我有一个并排放置的段落元素和图像元素，这个想法是让它看起来像一个项目，段落占30％，图像占用剩下的70％的容器在段落左上角/左下角有边框半径，图像右上角/右下角。现在，显然屏幕尺寸不同，只有一种尺寸，这些元素的高度相等。一旦你从这一点进一步调整它的高度，两个元素的高度就会增加或减少。

最初我想让它们保持两个相同的高度，直到1024px断点，我将再次使它们成为块元素，虽然我不知道这是否可能由于段落的大小调整性质。如果有人有任何关于如何使这些看起来更美观的想法，这将是伟大的。我可能完全以错误的方式解决了我的想法，但如果有人能花时间帮助我，我会非常感激。在过去的几天里，我一直在尝试所有的事情，但没有取得胜利！

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial scale=1">
  <link href="./style.css" type="text/css" rel="stylesheet">
</head>

<body>

   <div class="container">
   <section class="home-main">    
     <p class="main-para">aliquip sunt aut efflorescere fore praesentibus tamen quae eram officia 
       illustriora est tempor o id quis adipisicing appellat sed multos ea lorem 
       sempiternum qui doctrina ab dolor senserit tractavissent an probant 
       instituendarum elit culpa qui magna tempor aliquip quamquam minim voluptate 
       legam arbitrantur graviterque eu</p>  
      <img class="main-image" src="http://placehold.it/300x200">
    </section>        
  </div>

</body>

</html>


* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial;
  text-align: center;
}

.container {
  width: 95%;
  max-width: 80%;
  margin: 0 auto;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0;
}

/*  HOME-MAIN
============================================= */

@media (min-width: 1024px) {
  .main-para {
    float: left;
    width: 40%;
    background-color: #000;
    color: #fff;
    line-height: 1.5em;
    font-size: 1.4em;
    padding: 2em 1em 2.15em;
    margin: 0 0 1em;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
  }

  .main-image {
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
    float: right;
    width: 60%;
  }
}

Answer 1

如果我理解正确，您希望将占位符（您的图像）与文本之间的比例保持在70/30。首先，只需从容器类中删除max-width:80%，这样当您调整视口大小时，它看起来不会被移动到移动设备上。

.container {
  width: 95%;
  margin: 20px auto;
  padding: 10px;
}

然后添加display: flex和其他选择器，如下所示，以便元素很好地包装到flex中，本质上用作包装器：

.home-main {
  max-width: 100%;
  display: flex;
  flex-direction: row;
  flex-flow: nowrap; 
}

最后，在文本框中添加一些边距和填充，并将图像的宽度设置为外部容器的70％：

.main-para {
  padding: 10px;
  text-align: left;
}

img {
  max-width: 70%;
  height: auto;
  display: block;
  margin: 0;
}

Get the plunk here

Answer 2

这可以通过Flexbox轻松完成。基本上，你要求Flexbox（很好地）将子元素放在父元素中的某些条件，例如“我希望孩子A总是这么大，而孩子B覆盖所有剩余的空间。哦，并让它们堆叠。有时候。”这样的事情。

Flexbox还消除了使用float s。

的麻烦黑客

Pen here.

我只更改了CSS中的@media个查询：

@media (min-width: 1024px) {
  .main-para {
    float: left;
    width: 40%;
    background-color: #000;
    color: #fff;
    line-height: 1.5em;
    font-size: 1.4em;
    padding: 2em 1em 2.15em;
    margin: 0 0 1em;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
  }

  .main-image {
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
    float: right;
    width: 60%;
  }
}

到这个

@media (min-width: 1024px) {
  .home-main{
    display: flex; /* NEW */
  }
  .main-para {
    flex: 4; /* NEW */
    background-color: #000;
    color: #fff;
    line-height: 1.5em;
    font-size: 1.4em;
    padding: 2em 1em 2.15em;
    margin: 0 0; /* NEW */
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
  }

  .main-image {
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
    flex: 6; /* NEW */
  }
}

Answer 3

我为你做了一些事，但我认为这不是一个好主意，因为调整img的大小看起来不会很好，但是你可以尝试一下。

我删除了媒体查询并为p class和img类添加了一个高度，并添加了font-size：1em;在文中，这是一个jsfiddle：

https://jsfiddle.net/3L9sLp9v/

.main-para {
   float: left;
   width: 40%;
   background-color: #000;
   color: #fff;
   line-height: 1.5em;
   font-size: 1.4em;
   padding: 2em 1em 2.15em;
   margin: 0 0 1em;
   border-top-left-radius: 1em;
   border-bottom-left-radius: 1em;
   font-size: 1em;
   height: 325px;
}

.main-image {
   border-top-right-radius: 1em;
   border-bottom-right-radius: 1em;
   float: right;
   width: 60%;
   height: 325px;
}

使用内嵌图像响应调整段落

3 个答案: