CSS定位问题

Question

I am having trouble positioning this: 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>

You can go to mckelvey.me to look at it, its the About Me section. I have the img the way I like it but I want the .wrap section to be 100% of the width all the time take away the img width so they are on the some part. Hard to explain... blah. I have tried many things.

Answer 1

I would approach this differently and have the image as a background and using a margin-left:33%; or similar to give the image adequate space. You can use background-size:30%; or similar to control the size and position on the image.

<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>

If you want to stick with the <img> route then you will want to wrap the image in a <div> and float it along, like a responsive grid. http://www.w3schools.com/html/html_responsive.asp

Answer 2

Something like this should work, gives you the general idea:

<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>