Question

我希望将小的行星图像放在主徽标（标题img）周围合理的距离内，以使其看起来像卫星。我无法通过定位和保证金达到相同的目的。另外，当我插入图像时，徽标会稍微向下偏移，并且页面变得可滚动，我不希望页面可滚动。请帮忙。谢谢！

这是我的HTML：

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        color: Colors.blue,
        child: Center(
          child: GestureDetector(
            onTap: () {
              print('clicky');
            },
            child: ClipOval(
              child: Container(
                width: 200,
                height: 200,
                color: Colors.red,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

这是我的CSS：

    <body>

   <div id="particles-js"></div>

    <!-- UP Satellite -->
    <div id="up_sat">
        <img class="sat sat1" src="images/sat/rocket.png"/>
        <img class="sat sat2" src="images/sat/earth.png"/>
    </div>

    <!--- HEADER - LOGO ------>
    <div id="header"><img src="images/header.png" /></div>

   <!-- DOWN Satellite -->
    <div id="down_sat">
        <img class="sat sat3" src="images/sat/jupiter.png"/>
        <img class="sat sat4" src="images/sat/neptune.png"/>
    </div>

   <!-- Particle Script -->
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script src="js/main.js"></script>

</body>

Answer 1

您是否考虑过使用display: flex定位图像？我认为这是获得所描述内容的最灵活的方式。

尝试http://flexbox.help/尝试使用可以使用的不同类型的定位，并考虑如何在不同的屏幕尺寸上显示布局。这也应该有助于解决滚动问题。

在其他图像周围对齐图像？

1 个答案: