Question

如何让紫色div跳到下一行？我希望文本保持流畅，而不是在浏览器调整大小时跳转到下一行。意思是绿色和紫色的div无论如何都会保持内联。

以下是我到目前为止的内容 - https://jsfiddle.net/Ljcu1hyw/

请原谅我这是一个愚蠢的问题，但我必须在这里遗漏一些东西，只需要第二意见。

感谢您的时间！

.marco-maggio {
  width: 100%;
  height: 100%;
  background: #f0f0ef;
  box-sizing: border-box;
  padding: 80px 0px 100px 0px;
}

.marco-maggio .profile-wrapper {
  background: #FFBFBF;
  height: 100%;
  width: 100%;
  max-width: 1130px;
  margin:0 auto;
}

.profile {
  height: 100%;
  width: 340px;
  background: #DFFFBF;
  padding: 0 20px;
  box-sizing: border-box;
  display: inline-block;
}

.description {
  height: 100%;
  width: 100%;
  max-width: 780px;
  background: #DFBFFF;
  display: inline-block;
  box-sizing: border-box;
  padding: 0 20px;
  Float: right;
}
.description h1 {font-family: 'Montserrat', sans-serif; font-size: 34px; font-style: normal; font-weight: 700;}
.description h2 {font-family: 'Playfair Display', serif; font-size: 20px; font-style: italic; margin-top: 5px;}
.description span {font-family: 'Source Sans Pro', sans-serif; font-size: 16px; display: inline-block; margin-top: 50px;}

.profilepic {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #80BDFF;
}

.profile-span {
  font-size: 15px;
  font-family: 'Source Sans Pro', sans-serif;
  margin-top: 50px;
}

Answer 1

那是因为width: 100%类有.description。

而不是100％我会尝试：

.description {
    width: calc(100% - 340px); //340px is the width of the .profile, and you want to subtract that from the total width of 100%
}

如何使div不跳到下一行，而是流畅？当浏览器调整大小时

1 个答案: