水平布局图和figurecaption

我在Django模板中使用图和figcaption，但不能让它们水平布局。这些数字是垂直放置的，我想要一个水平布局。水平布局图和figurecaption

的代码如下：

<div class="container"> 
    <figure> 
     <a href="logout"> 
      <img src="{% static "workflow-icon.png" %}" alt="A"/> 
     </a> 
     <figcaption><a href="A">Execute function A</a></figcaption> 
    </figure> 
    <figure> 
     <a href="logout"> 
      <img src="{% static "review-icon.png" %}" alt="B"/> 
     </a> 
     <figcaption><a href="B">Execute function B</a></figcaption>       
    </figure> 
</div>

相关的CSS：

figure img { 
    vertical-align: top; 
} 
figure figcaption { 
    border: 1px dotted blue; 
    text-align: center; 
    font-family: Georgia; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

.container { 
    position: relative; 
    z-index: 1; 
    max-width: 300px; 
    margin: 0 auto; 
}

来源

2017-02-23 Luca

答案可能是“使用CSS来设计元素”，不是吗？ 'float：left;'和定义的宽度的组合应该可以工作 –

@Pekka웃感谢。我对这个东西很陌生，所以不知道可用的东西。我会研究这一点。 – Luca

请添加您尝试过的CSS。 – Gezzasa

Flexbox可以帮助你在这里。在你的CSS，如果添加：

.container { 
    display: flex; 
}

和删除：

position: relative; 
z-index: 1;

，给你什么，我相信你所描述。我从你的代码中创建了这个jsfiddle，并结合我的代码建议，这样你就可以看到它的工作原理。

来源

2017-02-23 17:12:29 dacmo

水平布局图和figurecaption

回答

相关问题