如何将内联元素与50vw的居中div对齐，以便正确调整大小？

Question

I have a div that is set to be 50% of the page's width at all times, and is centered. I would like to add an element to it's side so that the element touches the div's left edge (on different screen sizes). The element has a fixed max-width.

I've tried:

#element {
  position: absolute;
  align: left;
  padding-left: 3vw;
}

It works on most common screen sizes, but as I go very small or very big the element either overlaps with the div or there is a gap. What I would like ideally would be for the element to stick to the side of the div.

Answer 1

Absolute positioning is very problematic for this kind of layout. I recommend a flexbox layout.

In order to achieve this layout we will need to add a couple divs. One div to act as the 3rd column, I gave it the class ghost because it will contain nothing although the demo here uses a red border so you can see it.

The other div I added wraps the special element you want to stick to the middle div. This is so the element wrapper ( .element-wrap ) is a flex child, not the element itself.

Next, give the container of these 3 divs display: flex , turning it into a flexbox container:

section {
  display: flex;
  align-items: center; /* vertical alignment */
  justify-content: center; /* horizontal alignment */
}

The align-items property allows you to vertically align the items inside, while justify-content allows you to align them horizontally.

The center div, which I gave a blue background, will of course be in the middle of the layout and maintains its width with width: 50vw; . The 2 divs on the side have a class applied .flex-child which get this CSS:

.flex-child {
  flex-grow: 1;
  flex-basis: calc((100% - 50vw) / 2);
}

flex-grow: 1 allows those side divs to expand with the size of the screen. The flex-basis rule determines the starting size, where I am using a calc() function to dynamically calculate the width.

Now, the special element with the yellow background needs to be positioned next to the blue background, which is achieved here by turning its wrapper div into a flexbox too and aligning the content to the right:

.element-wrap {
  display: flex;
  justify-content: flex-end;
}

 * { box-sizing: border-box; } section { display: flex; align-items: center; justify-content: center; /* just for demo */ background: #eee; } .flex-child { flex-grow: 1; flex-basis: calc((100% - 50vw) / 2); /* just for demo */ border: 1px solid red; } .half-screen { width: 50vw; min-height: 300px; background: dodgerblue; } .element-wrap { display: flex; justify-content: flex-end; } .element { /* just for demo */ background: yellow; } 

 <section> <div class="flex-child element-wrap"> <div class="element"> ELEMENT that we are<br> getting to stick to the side<br> of the 50vw div. </div> </div> <div class="half-screen"> 50vw DIV </div> <div class="flex-child ghost"><!-- nothing here --></div> </section>