将给定部分移动到下一个可用空间

时间:2012-10-27 15:11:07

标签: css twitter-bootstrap

我有这个例子,其中我正在显示一些包含在section标签中的内容。最后我有http://dl.dropbox.com/u/51537247/the%20app/_check_boxes_form.html 这是我正在使用的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sales,Expenditure and Stocks </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 20px;
        padding-bottom: 40px;
      }
      .navigation{
      background-color:##008B8B;
      border:1px solid #ADFF2F;
      }
      a{
      margin-right:20px;
      }
      label{
      width:15%;
      float:left;
      }
      article{
      margin-top:3px;
      }
      .top_article{
      border:1px dotted #CC6600;
      }
      button{
      margin-right:8%;
      }
      section{
      display:inline-block;
      border:1px solid orange;
      width:100px;
      margin-bottom:10px;
      }
      .price_section{
      width:40px;
      }
      .contain_sections{
      width:100%;
      margin-left:15%;
      }
      .services_articled{
      overflow:hidden;
      }
    </style>
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
  </head>

  <body>

    <div class="container">
     <div class="row">
      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="span12 navigation">
      <a href="home.html">Home</a> <a href="services.html">Services</a><a href="expenses.html">Expenses</a><a href="daily_income.html">Daily Income</a><a href="daily_expenditure.html">Daily Expenditure</a><a href="analysis_dashboard.html">Analysis Dashboard</a><a href="account.html">Account</a>  
      </div>
      </div>
      <!-- Example row of columns -->
      <div class="row">
        <div class="span12">
        <article class="top_article">
        <article>
        <label>Date</label><input type="text" disabled="disabled" name="service_name" />
        </article>
         <article>
        <label>Customer Name</label><input type="text" name="service_name" />
        </article>
        <article class="services_articled">
        <label>Services Offered</label>
        <article class="contain_sections">
        <section>
        <header>Tour Guiding</header><input type="checkbox" name="tour" /><footer><input class="price_section" type="text" name="tour_price" /></footer>
        </section>
        <section>
        <header>Tour Guiding</header><input type="checkbox" name="tour" /><footer><input class="price_section" type="text" name="tour_price" /></footer>
        </section>
        <section>
        <header>Tour Guiding</header><input type="checkbox" name="tour" /><footer><input class="price_section" type="text" name="tour_price" /></footer>
        </section>
        <section>
        <header>Tour Guiding</header><input type="checkbox" name="tour" /><footer><input class="price_section" type="text" name="tour_price" /></footer>
        </section>
        <section>
        <header>Tour Guiding</header><input type="checkbox" name="tour" /><footer><input class="price_section" type="text" name="tour_price" /></footer>
        </section>
        <section>
        <header>Tour Guiding</header><input type="checkbox" name="tour" /><footer><input class="price_section" type="text" name="tour_price" /></footer>
        </section>
        <section>
        <header>Tour Guiding</header><input type="checkbox" name="tour" /><footer><input class="price_section" type="text" name="tour_price" /></footer>
        </section>
        <section>
        <header>Tour Guiding</header><input type="checkbox" name="tour" /><footer><input class="price_section" type="text" name="tour_price" value="eighth"/></footer>
        </section>
        <section>
        <header>Tour Guiding</header><input type="checkbox" name="tour" /><footer><input class="price_section" type="text" name="tour_price" /></footer>
        </section>
        <section>
        <header>Tour Guiding</header><input type="checkbox" name="tour" /><footer><input class="price_section" type="text" name="tour_price" /></footer>
        </section>
        </article>
        </article>
        <article>
        <label>Services Totals</label><input type="text" name="service_name" />
        </article>
        <button>Save New</button><button>Cancel</button>
        </article>
        </div>
        </div>
      <hr>

      <footer>
        <p>&copy; Company 2012</p>
      </footer>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap-transition.js"></script>
    <script src="assets/js/bootstrap-alert.js"></script>
    <script src="assets/js/bootstrap-modal.js"></script>
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <script src="assets/js/bootstrap-scrollspy.js"></script>
    <script src="assets/js/bootstrap-tab.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-button.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/bootstrap-carousel.js"></script>
    <script src="assets/js/bootstrap-typeahead.js"></script>

  </body>
</html>

我正在使用overflow:hidden;来隐藏溢出的项目,但我本来希望溢出移动到下一个有足够空间的地方,因为隐藏了溢出,一些重要文本被隐藏。我标记了溢出元素值为第八。

1 个答案:

答案 0 :(得分:0)

这段代码是问题

.contain_sections{
      width:100%;
      margin-left:15%;
      }

我修好了

 .contain_sections{
       margin-left:15%;
       }