Home >Web Front-end >HTML Tutorial >The 2 divs are displayed side by side, and a line break will appear when the browser interface is reduced. How to solve_html/css_WEB-ITnose
The 2 divs are displayed side by side, and a line break will appear when the browser interface is reduced. How to solve_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:001958browse
<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" href="test.css"></head><body><div id="parent" style="display:inline"><div id="child1" style="display:inline">1111111111111111111111111111111111111111111111111</div><div id="child2" style="display:inline">2222222222222222222222222222222222222222222222222222222222222222222222222</div></div> </body></html>
@charset: "utf-8";#child1{ background: blue;}#child2{ background:red;} 2 divs are displayed side by side, and a line break will appear when the browser interface is reduced. How to solve
Reply to discussion (solution)
parent setting minimum width
parent setting Minimum width
Can someone give me an example? I am a beginner and can’t understand it at all. I just learned it for a few days.
<!DOCTYPE html><html><head> <style> #parent{ display: block; /* div 默认 block 级别, inline 会使 尺寸类属性失效 */ min-width:2000px; } #parent>div{ display:inline; } #child1{ background: blue; } #child2{ background: red; } </style></head><body><div id="parent"><div id="child1">1111111111111111111111111111111111111111111111111</div><div id="child2">2222222222222222222222222222222222222222222222222222222222222222222222222</div></div></body></html> The length and width of the parent are not specified.
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