div positioning - невозможно разместить несколько div в пределах существующего div

Я создаю интерфейс, и я не могу понять, почему существует огромный разрыв между отображаемыми именами слева.div positioning - невозможно разместить несколько div в пределах существующего div

Я не устанавливал никаких дополнений или каких-либо полей для любого из элементов html. Мне нужно, чтобы три блока отображались в пределах указанной высоты и не превышали его содержимого. Что я делаю неправильно?

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> 
     <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
     <script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script> 
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
     <style> 
      .jumbotron { 
       padding: 0.5em 0.6em; 
       h1 { 
        font-size: 2em; 
       } 
       p { 
        font-size: 1.2em; 
        .btn { 
         padding: 0.5em; 
        } 
       } 
      } 

      .menuItem { 
       background-color: #e0e0ff; 
       width:295px; 
       height:183px; 
       border:2px solid #000; 
      } 

      .fontSize { 
       color: #00000; 
       font-family: Georgia, Times, serif; 
       font-size: 200%; 
       text-align: center; 
      } 
      .menuItem:hover { -moz-box-shadow: 0 0 50px #ccc; 
           -webkit-box-shadow: 0 0 50px #ccc; box-shadow: 0 0 50px #ccc; 
      } 
     </style> 

    </head> 

    <body> 
     <div class="container"> 
      <div class="jumbotron"> 
       <h2 style="text-align:center;">Head And Neck Therapy </h2> 
      </div> 

      <div style="width:1140px; height: 550px;border:2px solid #000;"> 
       <div style="width:300px; height: 550px;display: inline-block"> 
         <a href="#"> <div class="menuItem fontSize"> Scan Images </div> </a> 
         <a href="#"><div class="menuItem fontSize"> Patient Details </div> </a> 
         <a href="#"><div class="menuItem fontSize"> Confirmation </div> </a> 
        </div> 
       <div style="width:832px; height: 548px;display: inline-block"> </div> 
      </div> 
     </div> 
    </body>

источник

2015-10-31 chrisrhyno2003

Попробуйте оборачивать пункты меню в поплавковой левой DIV:

<div style="width:1140px; height: 550px;border:2px solid #000; background-color: blue"> 
     <div style="float: left"> 
      <div style="width:300px; height: 550px;display: inline-block; background-color: red"> 
       <a href="#"> <div class="menuItem fontSize"> Scan Images </div> </a> 
       <a href="#"><div class="menuItem fontSize"> Patient Details </div> </a> 
       <a href="#"><div class="menuItem fontSize"> Confirmation </div> </a> 
      </div> 
     </div> 

     <div style="width:832px; height: 548px;display: inline-block; background-color: green"> 

     </div> 
    </div>

источник

2015-10-31 21:41:36

Мне тоже нужен пустой div. Мне придется вставить другие элементы в этот конкретный div. – chrisrhyno2003

ok, а пустой div отобразит содержимое справа от пунктов меню? –

да. Вы правы. – chrisrhyno2003

У вас есть menuItem элементы, установленные в display: inline-block. Это позиционирует их на основе line-height, который вы не настраиваете и в итоге получите 20 пикселей. Попробуйте использовать display: block или установите высоту линии, равную высоте контейнера.

источник

2015-10-31 21:42:04 cameronroe

Проверьте следующий URL-адрес с измененным кодом. Возможно, это то, что вы ищете. http://liveweave.com/Ci6YPG

источник

2015-10-31 21:46:25

Попробуйте удалить высоту .menuItem и div style = "width: 1140px; height: 550px;". Вы удалите пробелы, а затем вы можете дать ширину и высоту.

источник

2015-10-31 21:47:04 Nishant

div positioning - невозможно разместить несколько div в пределах существующего div

ответ

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