HTML div 元素中的倒序

Question

我正在尝试使用 spinx_rtd_theme.

修改我的 sphinx 文档的样式代码

是否可以在不更改 html 的情况下将 img-tag 设置为每个 CSS 元素 a.icon-home 顶部的 logo.png代码？

<div class="wy-side-nav-search" style="background: #E20074">
  <a href="#" class="icon icon-home"> 
   testproject
  <img src="_static/logo.png" class="logo" alt="Logo">
 </a>           
 <div class="version">
  0.1
 </div>      
</div>

Answer 1

您可以使用 flexbox 布局模型来实现。

首先，将icon的display属性设为flex。

.icon {
    display:flex;
    flex-direction: column;
}

然后：

.icon img {
    order: 1;
}

Answer 2

这样设置 a 标签：

a {
display: flex;
flex-direction: column-reverse;
}

会起作用。进一步的解释在这里：https://css-tricks.com/almanac/properties/f/flex-direction/

The flex-direction property is a sub-property of the Flexible Box Layout module.

It establishes the main-axis, thus defining the direction flex items are placed in the flex container.

Reminder: the main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property.

The flex-direction property accepts 4 different values:

row (default): same as text direction row-reverse: opposite to text > direction column: same as row but top to bottom column-reverse: same as row-reverse top to bottom Note that row and row-reverse are affected by the directionality of the flex container. If its text direction is ltr, row represents the horizontal axis oriented from left to right, and row-reverse from right to left; if the direction is rtl, it's the opposite.

Answer 3

您可以将 icon-home 显示为 flex，然后使用 css 属性更改其方向 flex-direction

.icon-home {
    display: flex;
    flex-direction: column-reverse;
}

HTML div 元素中的倒序

Reverse order in HTML div element

html

css

python-sphinx