套用2 TO黑老师
本帖最后由 东篱闲人 于 2022-1-6 14:48 编辑 <br /><br /><style type="text/css">.大容器 {
margin: 0 auto;
width: 915px; /* 论坛测试用的宽度 */
border:1px solid red; /* 测试用 */
display: flex;
flex-direction: column;
}
.大容器 > div { margin: 4px; padding: 4px; border: 1px solid green; } /* 测试用 */
.顶部 {
display: flex;
flex-direction: row;
}
.顶部 > div { margin: 4px; padding: 4px; border: 1px solid yellow; } /* 测试用 */
.顶左 { width: 200px; height: 100px; }
.顶中 {}
.顶右 { width: 120px; }
.中部 {
display: flex;
flex-direction: row;
}
.中部 > div { margin: 4px; padding: 4px; border: 1px solid gray; } /* 测试用 */
.中左 { height: 260px; } /* 测试用 */
.中右 { width: 200px; }
.变长 { flex-grow: 2; }
</style>
<div class="大容器">
<div class="顶部">
<div class="顶左">https://s4.ax1x.com/2022/01/06/TxZsHJ.png</div>
<div class="顶中 变长">https://s4.ax1x.com/2022/01/06/TxZLCt.png</div>
<div class="顶右">每周一歌：<BR><BR> 邓丽君：<BR>《小城故事》<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=1 height=1 src="//music.163.com/outchain/player?type=2&id=473005028&auto=1&height=66"></iframe></iframe>
</div>
</div>
<div class="中部">
<div class="中左 变长">   似是故人<BR><BR>   作者：小九<BR><BR>
流水落花，光阴催人，岁月却不及你那样五彩缤纷
眺望远方，在雪里沾春的季节里，满怀热情与希望
英姿飒爽<BR>地独立风中，依然是那么耀眼！
记得小时候，你常常带着我疯跑，不停的疯转，我不停地咯咯笑
无忧无虑的快乐，<BR>简单得让人嫉妒的岁月，在记忆里闪烁发光
不管多么艰难的遭遇与坎坷，你总是那么毫无怨言的一笑而过，快乐旋<BR>转
耳边微风徐徐，流云剪飞絮，恰似当年
时别多年，与你再见，原来你早就在我记忆的时光轴里
把我的身影逐渐<BR>拉长
无需刻意铭记
有风经过，就能想起<BR>
花开有时，怀抱有时
美好有时，一旦有别，便成极致，便成苍凉！
当阳光洒满时光的缝隙
点滴的斑驳就这样雕<BR>刻在时光的隧道中
我们之间，早已相见未曾相识，如久别重逢却未曾珍惜
似是故人
你深情款款，带着治愈的微笑
带着我的心徜徉在自由的天空
在轮回中再次把时光雕刻。
<BR>
<BR></div>
<div class="中右">导读：<BR><BR>锦花潮思思诉怨，美<BR>樵歌情债缠身<BR><BR>马黑黑为什么这么黑？<BR><BR>加林森的教授生涯<BR><BR>小辣椒为什么从不吃辣椒？<BR><BR>大猫咪与猫不得不说的故事</div>
</div>
<div>花潮天气预报：<BR> 上午东风转南风，南风转西风，西风转北风，北风转东风。下午，晴转多云，多云转<BR>阴，阴转小雨，小雨转中雨，中雨转大雨，大雨转中雨，中雨转小雨，小雨转多云，多云转晴。 </div>
</div>
这个不错。子元素的宽度总和超出论坛帖子设定的宽度，所以在右边有所突围是正常的，本地测试绝对没有问题。 这个《花潮快报》办得好，里面很多八卦消息啊，比如‘锦花潮思思诉怨，美樵歌情债缠身’，哈哈，很有看点。还设计了每周一歌和天气预报，东篱大哥有办报纸的潜质啊{:4_199:} https://s4.ax1x.com/2022/01/06/TxZsHJ.png
花潮LOGO，单独拿出来赏赏{:4_187:} 马黑黑 发表于 2022-1-6 15:07
这个不错。子元素的宽度总和超出论坛帖子设定的宽度，所以在右边有所突围是正常的，本地测试绝对没有问题。
明白了，谢谢黑老师。。。{:4_190:} 红影 发表于 2022-1-6 15:16
这个《花潮快报》办得好，里面很多八卦消息啊，比如‘锦花潮思思诉怨，美樵歌情债缠身’，哈哈，很有看点。 ...
嗯嗯，有点小看点会多卖几份，薄利多销。。。{:5_117:} 东篱闲人 发表于 2022-1-6 18:07
明白了，谢谢黑老师。。。
比如说那个顶部中间的图片，它是有宽度的。子子元素的宽度影响子元素的宽度，最后表现出来的是影响父元素的宽度 挺好看的，老兄太厉害了。{:4_199:} 马黑黑 发表于 2022-1-6 15:07
这个不错。子元素的宽度总和超出论坛帖子设定的宽度，所以在右边有所突围是正常的，本地测试绝对没有问题。
黑黑，这个可以加个定位代码吗？居中设置？ 老头太棒了{:4_178:} 红影 发表于 2022-1-6 15:17
花潮LOGO，单独拿出来赏赏
亲爱的，以后我做帖可以用的，非常漂亮 小辣椒 发表于 2022-1-6 20:51
黑黑，这个可以加个定位代码吗？居中设置？
东篱这个就是居中的，只是撑开了。在本地测试很好的。 马黑黑 发表于 2022-1-6 21:13
东篱这个就是居中的，只是撑开了。在本地测试很好的。
论坛居中加定位代码可以吗 小辣椒 发表于 2022-1-6 21:24
论坛居中加定位代码可以吗
居中在偏移是可以的，但可能会有些意外出现 马黑黑 发表于 2022-1-6 21:45
居中在偏移是可以的，但可能会有些意外出现
好的，我知道了，以后我做的时间就加外框上传 东篱闲人 发表于 2022-1-6 18:07
嗯嗯，有点小看点会多卖几份，薄利多销。。。
笑喷了，这个也太有看点了{:4_170:} 小辣椒 发表于 2022-1-6 20:52
亲爱的，以后我做帖可以用的，非常漂亮
是啊，这个的设计非常漂亮，我也保存了。 红影 发表于 2022-1-6 21:50
是啊，这个的设计非常漂亮，我也保存了。
老头前几天帮小风音乐网站做了个logo非常漂亮 花潮时报创意不错~~{:5_116:} 小辣椒 发表于 2022-1-6 21:45
好的，我知道了，以后我做的时间就加外框上传
其实也不需要居中的，就像Windows一样定位也成