如何在同一行上制作这些div块?

时间:2014-03-14 07:02:32

标签: html css twitter-bootstrap twig

我的简报不希望与其他三个街区在同一条线上,它在博客帖子下面的第二行。有人可以告诉我如何解决这个问题,我非常擅长编程。

<div class="footer-wrapper">
<footer>
  <div class="row">

    <div class="span12 full-border"></div>        
    <!-- Begin latest blog post -->
    {% if settings.footer_blog_post and blogs[settings.footer_blog_post].handle == settings.footer_blog_post and blogs[settings.footer_blog_post].articles.size > 0 %}
    {% assign article = blogs[settings.footer_blog_post].articles.first %}
    <div class="span4">
      <div class="p30">
        <h4><a href="/blogs/{{ settings.footer_blog_post }}">{{ settings.footer_blog_post_header }}</a></h4>
        <p class="p10"><strong>{{ article.title | link_to: article.url }}</strong></p>
        <p>{{ article.content | strip_html | truncatewords: 30 }}</p>
      </div>
    </div>
    {% endif %}
    <!-- End latest blog post -->

    <!-- Begin footer navigation -->
    <div class="span4 footer-menu">
      <h4>{{ settings.footer_linklist_title }}</h4>
      <ul class="unstyled">
        {% for link in linklists[settings.footer_linklist].links %}
          <li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a></li>
        {% endfor %}
      </ul>
    </div>
    <!-- End footer navigation -->

    <!-- Begin newsletter/social -->

      <div class="clearfix">
      {% if settings.enable_social_links %}
        <h4>{{ settings.footer_social_title }}</h4>
        {% if settings.twitter_link != '' %}<a href="{{ settings.twitter_link }}" title="{{ shop.name }} on Twitter" class="icon-social twitter">Twitter</a>{% endif %}
        {% if settings.facebook_link != '' %}<a href="{{ settings.facebook_link }}" title="{{ shop.name }} on Facebook" class="icon-social facebook">Facebook</a>{% endif %}
        {% if settings.youtube_link != '' %}<a href="{{ settings.youtube_link }}" title="{{ shop.name }} on YouTube" class="icon-social youtube">YouTube</a>{% endif %}
        {% if settings.atom_link != '' %}<a href="{{ settings.atom_link }}" title="{{ shop.name }} news" class="icon-social atom">Blog feed</a>{% endif %}
        {% if settings.instagram_link != '' %}<a href="{{ settings.instagram_link }}" title="{{ shop.name }} on Instagram" class="icon-social instagram">Instagram</a>{% endif %}
        {% if settings.pinterest_link != '' %}<a href="{{ settings.pinterest_link }}" title="{{ shop.name }} on Pinterest" class="icon-social pinterest">Pinterest</a>{% endif %}
        {% if settings.vimeo_link != '' %}<a href="{{ settings.vimeo_link }}" title="{{ shop.name }} on Vimeo" class="icon-social vimeo">Vimeo</a>{% endif %}
        {% if settings.tumblr_link != '' %}<a href="{{ settings.tumblr_link }}" title="{{ shop.name }} on Tumblr" class="icon-social tumblr">Tumblr</a>{% endif %}
        {% if settings.google_link != '' %}<a href="{{ settings.google_link }}" title="{{ shop.name }} on Google+" class="icon-social google">Google+</a>{% endif %}
      {% endif %}
        </div>
        <div class="span4">
      {% if settings.footer_display_newsletter %}
      <div class="p30">
        <h4>{{ settings.footer_newsletter_title }}</h4>
        <form action="{{ settings.mailing_list_form_action }}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank">
          <input type="email" value="" placeholder="Email Address" name="EMAIL" id="mail" /><input type="submit" class="btn newsletter" value="Subscribe" name="subscribe" id="subscribe" />
        </form>
      </div>
      {% endif %}
      </div>

    </div>
    <!-- End newsletter/social -->

    <!-- Begin copyright -->
    <div class="span12 tc copyright">
      <p>Copyright &copy; {{ 'now' | date: "%Y" }} {{ shop.name }} <!--| {{ powered_by_link }}--> {% if settings.designed_by %}{% endif %} </p>
      <ul class="credit-cards clearfix">
        {% if settings.accept_visa %}<li><img src="{{ 'icon-cc-visa.gif' | asset_url }}" alt="Visa" /></li>{% endif %}
        {% if settings.accept_mastercard %}<li><img src="{{ 'icon-cc-mastercard.gif' | asset_url }}" alt="MasterCard" /></li>{% endif %}
        {% if settings.accept_amex %}<li><img src="{{ 'icon-cc-amex.gif' | asset_url }}" alt="Amex" /></li>{% endif %}
        {% if settings.accept_cirrus %}<li><img src="{{ 'icon-cc-cirrus.gif' | asset_url }}" alt="Cirrus" /></li>{% endif %}
        {% if settings.accept_delta %}<li><img src="{{ 'icon-cc-delta.gif' | asset_url }}" alt="Delta" /></li>{% endif %}
        {% if settings.accept_discover %}<li><img src="{{ 'icon-cc-discover.gif' | asset_url }}" alt="Discover" /></li>{% endif %}
        {% if settings.accept_westernunion %}<li><img src="{{ 'icon-cc-westernunion.gif' | asset_url }}" alt="Western Union" /></li>{% endif %}
        {% if settings.accept_paypal %}<li><img src="{{ 'icon-cc-paypal.gif' | asset_url }}" alt="PayPal" /></li>{% endif %}
        {% if settings.accept_bitcoin %}<li><img src="{{ 'icon-cc-bitcoin.gif' | asset_url }}" alt="Bitcoin" /></li>{% endif %}
      </ul> <!-- /.credit-cards -->
    </div>
    <!-- End copyright -->

  </div> 
</footer>

1 个答案:

答案 0 :(得分:0)

将此应用于所有div样式:

{display:inline;
float:left;}