Question

我需要拿两个元素然后关闭它们，一个靠近另一个元素。我需要用CSS做这个，所以这是我的HTML代码：

<section class="vc_row section-wrapper vc_custom_1453226174905 vc_row-has-fill">
  <div class="container">
    <div class="row">
      <div class="wpb_column vc_column_container vc_col-sm-6 vc_col-md-4">
        <div class="vc_column-inner ">
          <div class="wpb_wrapper"> 

            <div class="spotlight-wrap spotlight-default ">

              <figure class="tt-effect">

                <img src="http://andrejceccoli.com/wp-content/uploads/2016/09/programmaPolitico.jpg" alt="Programma Elettorale">

                <figcaption>
                  <h2>Programma Elettorale</h2>        
                    <div class="content">
                      <p>Tutti i punti del mostro programma elettorale.</p>
                      <a class="btn btn-outline " href="http://andrejceccoli.com/?page_id=15" title="">Leggi di più</a>
                    </div>
                </figcaption>
              </figure>
            </div> <!-- spotlight-wrap -->

//任何人都可以帮助我吗？

          //NEW FIGURE
              <figure class="tt-effect">
                <img src="http://trendytheme.net/demo2/wp/nominee/onepage/wp-content/uploads/2015/11/Issues-one-page-360x250.jpg" alt="Issues">
                <figcaption>
                  <h2>Issues</h2>                  
                  <div class="content">
                    <p>Rapidiously integrate plug-and-play channels rather than cost effective ideas.</p>

                    <a class="btn btn-outline " href="http://trendytheme.net/demo2/wp/nominee/onepage/issue-right-sidebar/" title="">Learn more</a>
                  </div>
                </figcaption>    
              </figure>
            </div> <!-- spotlight-wrap -->
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

我该怎么做？用css？

Answer 1

只需将CSS样式添加到figure代码：

figure {
    display: inline-block;
    float: left;
}

figure {
	display: inline-block;
}

<section class="vc_row section-wrapper vc_custom_1453226174905 vc_row-has-fill">
  <div class="container">
    <div class="row">
      <div class="wpb_column vc_column_container vc_col-sm-6 vc_col-md-4">
        <div class="vc_column-inner ">
          <div class="wpb_wrapper"> 

          	<figure class="tt-effect">
                <img src="http://andrejceccoli.com/wp-content/uploads/2016/09/programmaPolitico.jpg" alt="Programma Elettorale">
                <figcaption>
                  <h2>Programma Elettorale</h2>        
                    <div class="content">
                      <p>Tutti i punti del mostro programma elettorale.</p>
                      <a class="btn btn-outline " href="http://andrejceccoli.com/?page_id=15" title="">Leggi di più</a>
                    </div>
                </figcaption>
              </figure>

              <figure class="tt-effect">
                <img src="http://trendytheme.net/demo2/wp/nominee/onepage/wp-content/uploads/2015/11/Issues-one-page-360x250.jpg" alt="Issues">
                <figcaption>
                  <h2>Issues</h2>                  
                  <div class="content">
                    <p>Rapidiously integrate plug-and-play channels rather than cost effective ideas.</p>

                    <a class="btn btn-outline " href="http://trendytheme.net/demo2/wp/nominee/onepage/issue-right-sidebar/" title="">Learn more</a>
                  </div>
                </figcaption>    
              </figure>

            </div> <!-- spotlight-wrap -->
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 2

试试float: left;。否则，提供更多信息会更好。例如，哪些元素需要彼此靠近。

啊，如果你使用float，请创建下一个元素clear: both;。否则你的设计可能会被破坏。

如何把两个元素关闭css？

2 个答案: