Question

我无法定位：CSS

.about {
  height: 50vh;
  background: #1f7d5b;
  color: #f7f7f7;
}
.about img {
  float: left;
  max-width: 100%;
  max-height: 100%;
}
.wrap {
  float: right;
  text-align: justify;
  height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wrap h1 {
  font-size: 1.5em;
  font-weight: 600;
  color: #232323;
  text-align: center;
  padding: 0.5em 0;
  float: right;
  width: 100%;
}
.wrap p {
  font-size: 1em;
  font-weight: 100;
  max-width: 50em;
  text-align: center;
  line-height: 150%;
}

HTML

<div class="about"><img src="/img/abstract.jpg"/>
  <div class="wrap">
    <h1>About Me</h1>
    <p>Hello, I'm a Designer, Front-end Developer and of course a Tea Enthusiast. It is my mission to program simple and elegant, responsive websites while under the influence of tea.</p>
  </div>
</div>

您可以转到mckelvey.me查看它，它是关于我的部分。我有img我喜欢的方式，但我希望.wrap部分是宽度的100％，一直带走img的宽度，所以它们在某些部分。很难解释......等等。我尝试了很多东西。

Answer 1

我会以不同的方式处理此问题并将图像作为背景并使用margin-left:33%;或类似图像为图像提供足够的空间。您可以使用background-size:30%;或类似物来控制图像的大小和位置。

<div class="about" style="background:url('/img/abstract.jpg') no-repeat 0 50%;">
    <div class="wrap" style="margin-left:33%;">
        <h1>About Me</h1>
        <p>Hello, I'm a Designer, Front-end Developer and of course a Tea    Enthusiast. It is my mission to program simple and elegant, responsive websites    while under the influence of tea.</p>
    </div>
</div>

如果您想坚持使用<img>路线，那么您需要将图像包裹在<div>中并将其浮动，就像响应网格一样。 http://www.w3schools.com/html/html_responsive.asp

Answer 2

这样的事情应该有用，给你一般的想法：

<style>
*
{
    padding: 0;
    margin: 0;
}
.about
{
    display: table;
    background: #1f7d5b;
    color: #f7f7f7;
    width: 100%;
}
.about img
{
    float: left;
    width: 25%;
}
.wrap
{
    float: right;
    width: 75%;
    text-align: justify;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.wrap h1 
{
    font-size: 1.5em;
    font-weight: 600;
    color: #232323;
    text-align: center;
    padding: 0.5em 0;
    width: 100%;
}
.wrap p
{
    font-size: 1em;
    font-weight: 100;
    text-align: center;
    line-height: 150%;
    max-width: 50em;
    margin: 0 auto;
}
</style>
<div class="about">
  <img src="http://mckelvey.me/img/abstract.jpg"/>
  <div class="wrap">
    <h1>About Me</h1>
    <p>Hello, I'm a Designer, Front-end Developer and of course a Tea Enthusiast. It is my mission to program simple and elegant, responsive websites while under the influence of tea.</p>
  </div>
</div>

Css定位麻烦

2 个答案: