Div перекрывается, когда ширина установлена на 100%, но не тогда, когда ширина установлена в пиксель?

Я работаю над макетом для практики, и там я устанавливаю оболочку Div и устанавливаю ширину в CSS 100%, а также ее минимальную ширину: 800 пикселей, но внутри этой оболочки. Другое содержимое получается перекрывающимся при изменении размера окна. , Мой HTML страницаDiv перекрывается, когда ширина установлена на 100%, но не тогда, когда ширина установлена в пиксель?

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>@ViewBag.Title</title> 
    <link href="~/Content/themes/MyStyle.css" rel="stylesheet" /> 
    </head> 
<body> 
    <div id="wrapper"> 
     <div class="header"> 
      <div style="display:inline-block;width:400px;margin:5px 0 0 100px">This is my site</div> 
      <div style="display:inline-block;width:500px;margin:5px 0 0 20px"><input type="text"/>&nbsp&nbsp<input type="button" value="Search"/> </div> 
      <div style="display:inline-block;margin:5px 0 0 50px">@Html.Label("","LogIn","")&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp @Html.Label("SignIn")</div> 
     </div> 
    <div>@RenderBody()</div> 
     </div> 
</body> 
</html>

Мой Css

body,html,div,form { 
margin:0; 
padding:0; 
} 


#wrapper { 
width:100%; 
min-width:800px; 
} 

.header { 
width:100%; 
height:35px; 
background-color:rosybrown; 
}

Так что моя проблема в том, что, если я изложу его в пикселе тогда мой заголовок DIV не затрачивая на большом экране, а также содержание его будет скрывать от маленький экран. Я полностью исключаю эту идею, но не получил никакого решения.

источник

2015-11-13 avirk

Можете ли вы создать jsfiddle? Я не знаю, что то, что я получил, копируя свой код, - это то, что вы на самом деле получаете. – Paran0a

@ Paran0a okay Я создам это, но это мало чем отличается от этого, поскольку здесь я использую ASP.Net MVC с HTML-помощником для ярлыка. Дайте мне время, так как мой интернет очень медленный. :) – avirk

@ Paran0a здесь вы идете https://jsfiddle.net/s5mnf45r/ – avirk

Чтобы достичь этого, вам необходимо выполнить следующие действия.

Удалить встроенный CSS с DIV
Удалить мин-высоту, что вызывает вопрос здесь
Создать класс и дать, что display:inline и margin вы хотите
Если вы хотите, чтобы дать ширину, дать что в процентах только потому, что он получит скорректированный

Попробуйте ниже

body,html,div,form { 
 
margin:0; 
 
padding:0; 
 
} 
 

 

 
#wrapper { 
 
width:100%; 
 
} 
 

 
.header { 
 
width:100%; 
 
height:35px; 
 
background-color:rosybrown; 
 
} 
 
.site { 
 
    display:inline; 
 
    margin:10px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width" /> 
 
    <title>@ViewBag.Title</title> 
 
    <link href="~/Content/themes/MyStyle.css" rel="stylesheet" /> 
 
    </head> 
 
<body> 
 
    <div id="wrapper"> 
 
     <div class="header"> 
 
      <div class='site'>This is my site</div> 
 
      <div class="site"><input type="text"/>&nbsp&nbsp<input type="button" value="Search"/> </div> 
 
      <div style="display:inline-block;margin:5px 0 0 50px">Login</div> 
 
     </div> 
 
    <div>@RenderBody()</div> 
 
     </div> 
 
</body> 
 
</html>

Надеется, что это помогает вам!

источник

2015-11-13 06:33:52

Nope не работает вообще для меня. Проблема заключается в том, что мы устанавливаем ширину разделителя обертки в%, но она не работает, но когда мы устанавливаем в пикселях, она не перекрывается, не знаю, что вызывает. – avirk

Div перекрывается, когда ширина установлена ​​на 100%, но не тогда, когда ширина установлена ​​в пиксель?

ответ

Смежные вопросы

Div перекрывается, когда ширина установлена на 100%, но не тогда, когда ширина установлена в пиксель?