2013-05-08 93 views
0

我有问题,“1”-Form没有,没有100%的宽度旁边的“门票”。浮动为什么不起作用?

这里是一个图片我的意思 (其中“1”应为“橙色”,但它不工作):

enter image description here

here是怎么样子的链接。

HTML:

<section id="main_content"> 
      <div class="left inner">    
      <div class="grid_5 left tickets"> 
        <div class="header"> 
         <i class="icon-pushpin"></i> 
         Neue Tickets 
         <div class="count right"><span>6</span></div> 
        </div> 
        <div class="messages"> 
         <div class="msg"> 
          <div class="dreieck prio_a"></div> 
          <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div> 
          <div class="autor">Lars</div> 
          <small class="subject">Test</small> 
         </div> 
         <div class="msg"> 
          <div class="dreieck prio_a"></div> 
          <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div> 
          <div class="autor">Lars</div> 
          <small class="subject">Test</small> 
         </div> 
         <div class="msg"> 
          <div class="dreieck prio_a"></div> 
          <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div> 
          <div class="autor">Lars</div> 
          <small class="subject">Test</small> 
         </div> 
         <div class="msg"> 
          <div class="dreieck prio_a"></div> 
          <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div> 
          <div class="autor">Lars</div> 
          <small class="subject">Test</small> 
         </div> 
         <div class="msg"> 
          <div class="dreieck prio_a"></div> 
          <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div> 
          <div class="autor">Lars</div> 
          <small class="subject">Test</small> 
         </div> 
         <div class="msg"> 
          <div class="dreieck prio_a"></div> 
          <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div> 
          <div class="autor">Lars</div> 
          <small class="subject">Test</small> 
         </div> 
        </div> 
       </div> 
       <div class="grid_100 preview">1</div> 
      </div> 
      <article class="cal right"> 
       <div class="calender"><?php include('lib/actions/get/calender.php'); ?></div> 
      </article> 
     </section> 

custom.css

.container_100 { width:100%; min-width:600px; } 
.grid_13 { width:13%; min-width:250px; } 
.grid_100 { width:100%; } 

styles.css的

body { background:#eaedf1; } 

a { color:#fff; text-decoration:none; } 

.right { float:right !important; } 
.left { float:left !important; } 

.hide { display:none !important; } 
.show { display:block !important; } 

.sep_10 { height:10px; } 
.sep_15 { height:15px; } 
.sep_20 { height:20px; } 
.sep_30 { height:30px; } 
.sep_40 { height:40px; } 
.sep_50 { height:50px; } 
.sep_76 { height:1px; width:76px; float:left; } 

#content { width:100%; margin:0; } 

nav.tnav { height:51px; width:100%; background:#EB5A47; } 
nav .tickets, nav .team, nav .support { margin:10px; height:30px; color:#972216; border:1px solid #972216; width:150px; border-radius:5px; float:left; } 
nav div { margin:5px; } 

aside { color:#95A1A9; background:#33393D; } 
aside a { color:#95A1A9; padding:5px 0; } 
aside .nav { padding:5px; height:100%; } 
aside .nav ul li { font-size:15px; padding:5px; font-weight:bold; } 

.cal { float:left; } 
.calender .header { height:51px !important; color:#972216; background:#EB5A47 !important; font-size:24px; line-height:50px !important; vertical-align:middle ; text-align:center; } 
.calender table { width:100%; color:#972216; } 
.calender i { color:#972216; } 
.calender table thead tr th { padding:5px; } 
.calender table thead { padding:5px; background:#EB5A47; } 
.calender table tbody { padding:5px; background:#EB5A47; } 
.calender table tbody tr td { padding:5px; } 
.calender table tbody tr td.before { color:#ccc !important; } 
.calender table tbody tr td.today { font-weight:bold; } 

section .inner { background:#fff; } 
article.cal { margin:0 !important; } 

.circle img { margin:0; background:transparent; z-index:100; width:35px; height:35px; border-radius:40px; } 

#main_content { color:#95A1A9; } 
#main_content .grid_5 { margin:0px !important; } 
#main_content .header { height:27px; background:#33393D; padding:5px; line-height:28px; vertical-align:center; position:relative; z-index:200; cursor:pointer; } 
#main_content i.icon-pushpin { transform:rotate(90deg); } 
#main_content .count { width:25px; height:25px; border-radius:50px; background:#EB5A47; color:#972216; position:relative; top:1px; } 
#main_content .count span { position:relative; left:4px; bottom:2px; } 
#main_content .messages { position:relative; z-index:200; background:#fff; border:1px soild #ccc; cursor:pointer; } 
#main_content .messages .msg { color:#33393D !important; border:1px solid #CBCFD6; padding:5px; } 
#main_content .messages .msg .autor { color:#33393D !important; } 
+9

StacKOverflow最好的做法是发布导致您遇到问题的代码(尽可能小),而不是仅仅链接到您的网站。这将使人们更容易发现问题,并使问题对未来的读者更有用。 – ASGM 2013-05-08 09:18:05

+0

也许它只是空的,所以它不占用任何空间? – 2013-05-08 09:21:05

+0

我添加了代码,这是我的问题 – Evolutio 2013-05-08 09:27:13

回答

1

包含div有class="left inner"但它的宽度是不是100%。 当您将宽度设置为100%时,它会扩展到包含div的宽度。

设置包含所需的宽度的div,它应该工作。

+0

Thx它很好用:width:calc(100% - 195px - 251px) – Evolutio 2013-05-08 09:48:10