Контейнер, не обертывающий содержимое

-4

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

CSS:

.container { 
    max-width: none !important; 
    width: 960px; 
} 

.rectangle { 
    min-height: 40px; 
    margin-bottom: 20px; 
    border: 1px solid transparent; 
    height: 65px; 
    position: fixed; 
    top: 0px; 
    right: 0px; 
    left: 0px; 
    border-radius: 0px; 
    background-color:#67518e; 

}

HTML:

<div class="rectangle"> 
    <div class="container"> 
    <a href="" style="float:left;color:white;">sample1</a> 
    <a href="" style="float:right;color:white;">sample2</a> 
    </div> 
</div>

источник

2015-01-05 siddharth

Я понятия не имею, что вы хотите для того чтобы достигнуть с этим кодом. –

Я добавил контейнер так, чтобы ссылки sample1 и sample2 содержались в ширину 960px, а не на краях страницы. – siddharth

pls обеспечивают скрипку http://jsfiddle.net/ – doniyor

Хорошо, теперь я получаю то, что хочу, для того чтобы достигнуть.

Чтобы обернуть его и центр по горизонтали (я предполагаю, что вы хотите сделать это), вам необходимо

margin: 0 auto;

в .container

Примечание: не будет никакой прокрутки по горизонтали из-за position: fixed;

СОВЕТ: Если вы создаете CSS сделать дерево селекторов в этом случае

.rectangle{}

, а затем

.rectangle .container{}

здесь пример JSFIDDLE

источник

2015-01-05 09:34:25

Спасибо за вашу помощь, теперь он отлично работает. – siddharth

Я рад, что смогу помочь вам, если это ваше решение для anwser, пожалуйста, отметьте как «правильный anwser» спасибо :) –

Попробуйте это:

<!DOCTYPE> 
 
    <html> 
 
    <head> 
 
    <title>sample</title> 
 
    <style> 
 
    .container { 
 
     max-width: none !important; 
 
     width: 960px; 
 
    } 
 
    
 
    .rectangle { 
 
     min-height: 40px; 
 
     margin-bottom: 20px; 
 
     border: 1px solid transparent; 
 
     height: 65px; 
 
     position: fixed; 
 
     top: 0px; 
 
     // right: 0px; 
 
     left: 0px; 
 
     border-radius: 0px; 
 
     background-color:#67518e; 
 
    
 
    } 
 
    </style> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
      <div class="rectangle"> 
 
       <a href="" style="float:left;color:white;">sample1</a> 
 
       &nbsp;&nbsp;&nbsp; <a href="" style="float:right;color:white;">sample2</a> 
 
      </div> 
 
     </div> 
 
    </body> 
 
    </html>

источник

2015-01-05 09:40:55

Контейнер, не обертывающий содержимое

ответ

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