当我有两个并排的时候，如何在我的CSS中实现响应式设计？

Question

I have a design challenge. I have two spans, side by side, and I don't really know how to do that kind of CSS and still make it responsive. I'd have too big of margins on one view port size and two small on another. Any suggestions on how to make it look kinda the same on every screen size, without a big space in between?

My CSS: (I know it's kinda long)

#lattice {
height: 93%;
width: 30%;
position: fixed;
background-color: white;
top: 40px;
right: .75%;
display: inline-block;
padding-left: 5px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px;
overflow-y: scroll;
}
#intendedContent {
font-size: 16px;
position: fixed;
background-color: white;
top: 40px;
left: 1%;
display: inline-block;
overflow-y: scroll;
height: 93%;
width: 62.5%;
padding-left: 20px;
padding-top: 0px;
padding-right: 20px;
word-wrap: break-word;
line-height: 175%;
}

Relying on an XMLHttpRequest object, I really only have two spans:

        <span id="intendedContent">
        </span>
        <span id='lattice'>
        </span>

Answer 1

It's hard to answer your question without knowing exactly what you're trying to do, but I suspect you are trying to make the spans stay side-by-side at any window size, but they are in fact stacking one on top of each other at small window sizes. Is that correct?

If so, you have three basic options:

1. Currently, you are setting relative (percent-based) widths for your elements but the padding is set in absolute units (px). This is probably forcing the combined widths of the span elements to be greater than 100%, which is the width of the browser window, because the percentage width taken up by the absolutely-sized padding is greater at smaller window sizes. You can set your padding in percent and make sure the combined widths of both elements (including widths, padding, margins, and borders) plus the one character space rendered between inline-block elements is less than 100%. Or...

2. You can set box-sizing: border-box; on the spans and, thus, their padding will be rendered inside of the width you set. See here for more on box-sizing . If you do this, don't forget the prefixed versions (eg -webkit-box-sizing: border-box).

3. Arguably, to make your site responsive, as you mentioned in your question, you should not want the spans to appear side-by-side at every browser width. For example, on a portrait-oriented phone your users would probably find it more accessible to have the spans stacked one on top of each other. Whilst this goes outside the scope of your question (and I do not know what you are intending to do with the span elements), I would suggest doing this with media queries .

If you edit your question to let us know your intentions I can be more specific and helpful :)