Make right div within container responsive

问题

I have 2 divs in a container, one in the center and one to the right. I want the width of the right div to be responsive. Currently, only the max-width on the centered one works.

See this jsFiddle.

How do I make the right div responsive too?

HTML:

<div id="container">

    <div id="middle">Centered</div>

    <div id="right">Make me responsive</div>

</div>

CSS:

#container {
    width: 100%;
    text-align: center;
    position: relative;
}

#middle {
    background: #ddd;
    margin: 0 auto;
    position: relative;
    width: 100%;
    max-width:300px;
    height:300px;
    display: inline-block;
    vertical-align: top;
}

#right {
    background:yellow;
    width:100%;
    max-width:300px;
    display: inline-block;
    vertical-align: top;
    position: absolute;
}


@media screen and (max-width: 350px) {
    #right {
        display: none;
    }
}

回答1:

The idea is to use flexbox. And add a pseudo element for left column, in order to make the middle one in the center with your existing markup.

JSFiddle Demo

#container {
    display: flex;
}
#container:before, #middle, #right {
    border: 1px solid red;
    flex: 1 1 0;
}
#container:before {
    content:"";
}
#middle {
    max-width: 100px;
}

<div id="container">
    <div id="middle">Centered</div>
    <div id="right">Responsive</div>
</div>

回答2:

You can accomplish what you want by doing something like this: JSFiddle
Only problem is your middle div has to have a fixed width but using media queries you can forget about that. Keep in mind that calc browser support could be better (although there are polyfills).

#middle {
    position: relative;
    margin: 0 auto;
    height: 300px;
    width: 340px;
    background: #ddd;
    text-align: center;
}

#right {
    position: absolute;
    top: 0; right: 0;
    width: calc(50% - 170px);
    background: red;
}

@media screen and (max-width: 340px) {
    #middle {
        width: auto;
        max-width: 340px;
    }
    #right {
        display: none;
    }
}

BEFORE EDIT

max-width is not working on elements where position is set to absolute.

What exactly do you want do accomplish with absolute and also, what kind of layout do you want to get in the end?

回答3:

remove the max-width from right div. also you have to set a percent less than 100% but totally 100% to make sense to responsive divs:

#container {
  width: 100%;
  text-align: center;
  position: relative;
}
#middle {
  background: #ddd;
  margin: 0 auto;
  position: relative;
  width: 80%;
  max-width: 300px;
  height: 300px;
  display: inline-block;
  vertical-align: top;
}
#right {
  background: yellow;
  width: 20%;
  display: inline-block;
  vertical-align: top;
  position: absolute;
}
@media screen and (max-width: 350px) {
  #right {
    display: none;
  }
  #middle {
    width: 100%;
  }
}

<div id="container">

  <div id="middle">Centered</div>

  <div id="right">Make me responsive</div>

</div>

来源：https://stackoverflow.com/questions/29321279/make-right-div-within-container-responsive

标签

html

css

responsive-design