编程小技巧:利用margin 负数, 形成换行的效果

本文介绍了一种使用负Margin值实现视图元素自动换行的方法,通过调整RadioButton的marginLeft和marginTop属性值来达到紧凑排列的效果,适用于Android界面设计。

margin的值可以为负的大家都知道,但有多少人想过利用这个负数可以做点什么?下面是

利用margin 负数,形成换行的效果:


    <RadioGroup
        android:id="@+id/radio_group_preset"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:orientation="horizontal" >    
     <RadioButton
            android:id="@+id/radio_quality_0"
            android:layout_width="45dip"
            android:layout_height="35dip"
            android:layout_marginLeft="5dp"
            android:layout_weight="1"
            android:gravity="center"
          />
 <RadioButton
            android:id="@+id/radio_quality_1"
            android:layout_width="45dip"
            android:layout_height="35dip"
            android:layout_marginLeft="50dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/btn_preset_4"
          />
        <RadioButton
            android:id="@+id/radio_quality_4"
            android:layout_width="45dip"
            android:layout_height="35dip"
            android:layout_marginLeft="-200dp"  (总布局长度为200,maiginleft-200,把布局移到左端)
            android:layout_marginTop="40dip"(运用marginTop40形成换行)
            android:layout_weight="1"
            android:gravity="center"
          />
 <RadioButton
            android:id="@+id/radio_quality_5"
            android:layout_width="45dip"
            android:layout_height="35dip"
            android:layout_marginLeft="-150dp"  
            android:layout_marginTop="40dip"(运用marginTop40形成换行)
            android:layout_weight="1"
            android:gravity="center"
          />
</RadioGroup>

要为包含类名为 `image-item` 的元素实现换行效果,可借助 CSS 的弹性布局(Flexbox)或网格布局(Grid)。以下是使用弹性布局的示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .image-container { display: flex; flex-wrap: wrap; } .image-item { text-align: center; margin: 10px; } </style> </head> <body> <div class="image-container"> <div class="image-item"> <img src="C:\软件\有道翻译\YD.jpg" width="100" height="100"> <h3><a href="myapp://">网易有道云</a></h3> </div> <div class="image-item"> <img src="C:\软件\有道翻译\YD.jpg" width="100" height="100"> <h3><a href="myapp://">网易有道云</a></h3> </div> <div class="image-item"> <img src="C:\软件\有道翻译\YD.jpg" width="100" height="100"> <h3><a href="myapp://">网易有道云</a></h3> </div> <div class="image-item"> <img src="C:\软件\有道翻译\YD.jpg" width="100" height="100"> <h3><a href="myapp://">网易有道云</a></h3> </div> <div class="image-item"> <img src="C:\软件\有道翻译\YD.jpg" width="100" height="100"> <h3><a href="myapp://">网易有道云</a></h3> </div> </div> </body> </html> ``` 在上述代码里,`.image-container` 类采用 `display: flex` 与 `flex-wrap: wrap`。`display: flex` 把容器设定为弹性布局,`flex-wrap: wrap` 准许子元素在一行放不下时自动换行。`.image-item` 类用于设定每个图片项的样式,包含居中对齐与外边距。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值