2014-09-21 4 views
0

Я только что начал базовое приложение MVC 4, и мне трудно найти, как сделать два divs в блоках, а не рядом друг с другом. В моем _Layout.cshtml файле, у меня есть следующий код для body тега:Проблема Создание блокированных разделов

<body> 
    <div style="width: 60%; margin: 0 auto; display: block"> 
     <div id="header"> 
      <div class="headerImage" style="height: 200px; width: 150px; float: left"></div> 
     </div> 

     <div id="body" style="display: block"> 
      @RenderBody() 
     </div> 
    </div> 
    @Scripts.Render("~/bundles/jquery") 
    @RenderSection("scripts", required: false) 
</body> 

И в headerImage классе:

.headerImage 
{ 
    background: url('@Url.Content("~/Content/Images/foo.jpg")'); 
    background-repeat:no-repeat; 
    background-size:100%; 
} 

Теперь в моем Index.cshtml зрении, которая визуализируется как часть @RenderBody(), у меня есть простая кнопка:

<div> 
    @using (Html.BeginForm("action", "controller")) 
    { 
     <input type="submit" value="hello world" /> 
    } 
</div> 

Когда я запустил это, кнопка расположена рядом с изображением, даже тьфу они находятся в разных дивы:

enter image description here

Я даже попытался установить display:block на дивы, но это не помогло. есть идеи как это сделать?

+0

Вы пробовали '#body {ясно: как; } ', чтобы отобразить изображение под изображением? –

+0

Это сделало. Отправьте его как ответ, и я соглашусь. – user2872534

+0

Просто добавили ответ ниже, со ссылкой на дополнительную информацию об очистке поплавков. –

ответ

1

Похоже, что вам нужно, чтобы очистить ваш второй <div> следующим образом:

#body { 
    clear: both; 
} 

Более подробная информация по очистке ваших поплавки можно найти на

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