web前端，用基础HTML和CSS如何实现图下效果？

图1是原图，图二是我自己写的样图。

图二蓝色框框内内容无法实现，请问用基础HTML和CSS应该怎么实现这个效果。

望告知，卡了一个星期了，谢谢各位巨佬。

蓝色框框内内容可以用float: left;实现

代码如下：{如果对你有帮助，可以给我个采纳吗，谢谢!! 点击我这个回答右上方的【采纳】按钮}。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
ul.box {
	border: 1px solid #66f;
	width: 400px;
	height: 100px;
}
ul.box > li{
	width: 200px;
	float: left;
}
</style>
</head>
<body>

<ul class="box">
	<li>AAAAAAAAAAA</li>
	<li>BBBBBBBBBBB</li>
	<li>CCCCCCCCCCC</li>
	<li>DDDDDDDDDDD</li>
</ul>

</body>
</html>

w3school上好好看看css，flex布局

随便一个标签，定义为行内块元素，限制宽度或者....

border-top:1px dashed #000；

div+flex布局即可还有列表应用看看这个flex http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632