Home >Web Front-end >HTML Tutorial >div float? CSS help! Urgent_html/css_WEB-ITnose

div float? CSS help! Urgent_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:08:401006browse






The above two divs , I want the lower div to automatically change its position as the height of the upper one changes, and keep the height of the gap between the two divs unchanged. How to achieve this?


Reply to discussion (solution)

Just set margin
.search {
margin-top: 10px;
}

No, the css of search and conds is like this
.search{ width:99.9%; padding-top:2px; height:28px;
border: 1px solid #B5D8F1; text -align: center; margin-top: 10px;
}
.conds{ margin:2px;height:30px;}

Is there a conflict?

I don’t know what your specific requirements are, what you want to achieve, I can’t tell.

Didn’t you make it clear? What does it mean to automatically change position? How can it change if you define a fixed height?

I'm wrong, it's not the height, it's the position change. The first div is 100px higher than before, then the div below moves 100px downwards

Isn't it now that it moves downwards but overlaps? ?

Instead of moving down now, does it overlap?

Yes, it covers it directly

The button is covered and cannot be seen. I don’t know how to post the picture, so I won’t upload it.

I suggest you put the CSS Post the code.

Generally, if the height is not set, the effect you mentioned can be automatically achieved. However, your current effect is abnormal. I suggest you paste the CSS code. It may be due to positioning or something.

Otherwise, you can try adding overflow:auto; to the DIV that you want to adjust the height. If it doesn’t work, you can only paste the code.

I tried your own code above and there is no overlapping effect as you mentioned. . . . . . . There may be conflicts in other places

Use position to adjust
If you want the position to change, position:relative; usually solves the problem
But there is another way that you can change the position Place the two layers inside the first one, then position the second layer: absolute; then set the height

This needs to be done using positioning.

position:relative;
and position:absolute;

This is a very simple positioning method. In fact, you will remember it if you practice more. I always forget it!

If it is a floating problem, clear the floating. clear: both;

The div will be automatically moved down, just like building blocks, without any other modifications. There may be a conflict in styles.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn