css如何实现英文对话排版
css如何实现英文对话排版如图，两个人对话排版，怎么实现说话内容对齐，是叫悬挂缩进吗，
最好简单一点，本人小白，最好有个例子。
是悬赏少还是看不懂？
我不懂css,html，不要说这那那这的
把我的图片样式写好代码，效果一样就好了。
方法有很多种，是我就采用以下几种方式之一：
方式一：table布局
这种左右分别对齐的排版，第一反应用table。我知道肯定有人开始鄙视我，说什么年代了还在用table。但是，我想说的是table也是标准标签之一，把标签用在合适的地方，就是对标签最优的利用，不是吗?
*{margin: 0;
padding: 0;
}
.personName{
text-transform: uppercase;
}<table>
<tr>
<td valign="top">
<span class="personName">Georage：</span>
</td>
<td valign="top">
<p>This is a good day.</p>
<p>This is a good day.</p>
</td>
</tr>
<tr>
<td valign="top">
<span class="personName">Ken：</span>
</td>
<td valign="top">
<p>This is a good day.</p>
<p>This is a good day.</p>
</td>
</tr>
</table>
方式二：利用dl标签
*{margin: 0;
padding: 0;
}
.personName{
text-transform: uppercase;
float: left;
width: 80px;
clear: left; /* 清除左浮动 */
}
.words{
float: left;
}
.dailog{
overflow: hidden; /* 可以清除浮动 */
margin-bottom: 20px;
line-height: 24px;
font-size: 14px;
}
<dl class="dailog">
<dt class="personName">
Georage:
</dt>
<dd class="words">
<p>This is a good day.</p>
<p>This is a good day.</p>
</dd>
<dt class="personName">
Ken:
</dt>
<dd class="words">
<p>This is a good day.</p>
<p>This is a good day.</p>
</dd>
</dl>
方式三：可以利用 ul 或者 ol 标签，方法类似 方式二。
方式四：可以全用div，具体也类似方式二，这里就不罗列了。
一些详细的样式就不写了，这里只写了主要的样式，仅供参考。
追问
名字和说的话不在一行，这怎么改，
用的哪种方式？table？
给td添加 valign="middle"
其实，既然使用了CSS，HTML怎么写都无所谓。只要注意一点，就是要注意HTML标签自身的默认样式及一些特别之处。例如table会影响性能，ul内边距和圆点等。
由于名字是不定长度的，所以使用width是不行的。同时，为了保证布局一致，所以在不定width的情况下，只能用table和grid布局了。
在考虑table渲染性能的情况下，使用grid布局。
<div class="messages"><div class="name">GEORGE</div>
<div class="content">Two return tickets to ...</div>
<div class="name">ATTENDANT</div>
<div class="content">At nineteen minutes ...</div>
<div class="empty-line"></div>
<div class="name">GEORGE</div>
<div class="content">Which platform?</div>
</div>.messages {
display: grid;
grid-template-columns: auto 1fr;
}
.name {
white-space: nowrap;
}
.name::after {
content: ":";
}
.content {
text-align: justify;
}
.empty-line {
grid-column-end: 3;
grid-column-start: 1;
height: 1em;
}
名字和说的话不在一行比较简单。因为不必考虑每行的名字长度是否统一的问题。
<div class="messages"><div class="name">GEORGE</div>
<div class="message">
<p>Two return tickets to ...</p>
<p>Two return tickets to ...</p>
</div>
</div>.messages {
margin-bottom: 1em;
}
.name {
content: ":";
}
/* 以下对于.message的样式三选一 */
/* 使用margin-left缩进 */
.message {
margin-left: 2em;
}
/* 使用padding-left缩进 */
.message {
padding-left: 2em;
}
/* 使用text-indent缩进 */
.message {
text-indent: 2em;
}
完整代码
<!DOCTYPE html><html>
<head>
<title>demo</title>
<meta name="viewport" content="width=device-width">
<style>
.messages {
display : grid;
grid-column-gap : 1em;
grid-template-columns : auto 1fr;
}
.name {
white-space : nowrap;
}
.name::after {
content : ":";
}
.content {
text-align : justify;
}
.content p {
margin : 0;
}
hr {
grid-column-end : 3;
grid-column-start : 1;
height : 1em;
opacity : 0;
pointer-events : none;
user-select : none;
}
</style>
</head>
<body>
<article class="messages">
<div class="name">GEORGE</div>
<blockquote class="content">
<p>Two return tickets to ...</p>
<p>What time will the next ...</p>
</blockquote>
<div class="name">ATTENDANT</div>
<blockquote class="content">
<p>At nineteen minutes ...</p>
</blockquote>
<hr>
<div class="name">GEORGE</div>
<blockquote class="content">
<p>Which platform?</p>
</blockquote>
<div class="name">ATTENDANT</div>
<blockquote class="content">
<p>Platform Two.</p>
<p>Over the bridge.</p>
</blockquote>
<hr>
<div class="name">KEN</div>
<blockquote class="content">
<p>What time will the next ...</p>
</blockquote>
<div class="name">GEORGE</div>
<blockquote class="content">
<p>At eight nineteen.</p>
</blockquote>
<div class="name">KEN</div>
<blockquote class="content">
<p>We've got plenty of time ...</p>
</blockquote>
<hr>
<div class="name">GEORGE</div>
<blockquote class="content">
<p>It's only three minutes left ...</p>
</blockquote>
<div class="name">KEN</div>
<blockquote class="content">
<p>Let's go and have a ...</p>
<p>There's a bar next door to the sta...</p>
</blockquote>
<hr>
<div class="name">GEORGE</div>
<blockquote class="content">
<p>We had better ...</p>
</blockquote>
</article>
</body>
</html>
text-align:justify;
text-justify:inter-ideograph;
语法：
text-justify :
auto | distribute |distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper
取值：
auto : 默认值。允许浏览器代理用户确定使用的两端对齐法则。
distribute : 处理空格很像newspaper ，适用于东亚文档。尤其是泰文。
distribute-all-lines : 两端对齐行的方式与distribute 相同，也同样不包含两段对齐段落的最后一行。适用于表意字文档
distribute-center-last : 未实现。
inter-cluster : 调整文本无词间空格的行。这种模式的调整是用于优化亚洲语言文档的。
inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格
inter-word : 通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效
kashida : 通过拉长选定点的字符调整文本。这种调整模式是特别为阿拉伯脚本语言提供的。需要IE5.5+支持
newspaper : 通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式
说明：设置或检索对象内调整文本使用的对齐方式。因为这个属性影响文本布局，所以text-align 属性必须被设置为justify 。此属性只作用于块对象。此属性对于currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为textJustify 。
以上方法对chrome（360也是chrome内核）无效，还需再加上下面代码：
word-break:break-all。
问题很简单 主要是怎么让你明白 不知道这样你是否能看懂
本答案出自“我要编程”软件开发师训练平台免费课程。追问
能详细一点吗？看不懂
追答<head><!--css样式-->
<style>
body{background-color: #EBEBEB}
.aaa{background-color: #CB4F51;padding: 10px;display: block}
li{list-style:none;}
.question{
margin-right:10px;
float:left;
width:50px;
text-align:left;
}
.list_box{
width:150px;
word-break:break-all;
}
.ans{
float:left;
width:90px;
}
.list_box li{
margin-bottom:10px;
overflow:hidden;
}
</style>
<!--引用jquery库-->
</head>
<body>
<ul class="list_box">
<li><span class="question">aaaaa:</span> <span class="ans">bbbbbbbbbbbbbbbbbb</span></li>
<li><span class="question">aaaaa:</span> <span class="ans">bbbbbbbb</span></li>
<li><span class="question">aaaaa:</span> <span class="ans">bbbbbbbbbbbbbbbbbb</span></li>
<li><span class="question">aaaaa:</span> <span class="ans">bbbbbbbbbbbbb</span></li>
</ul>本回答被提问者采纳
css如何实现英文对话排版
方法有很多种，是我就采用以下几种方式之一：方式一：table布局 这种左右分别对齐的排版，第一反应用table。我知道肯定有人开始鄙视我，说什么年代了还在用table。但是，我想说的是table也是标准标签之一，把标签用在合适的地方，就是对标签最优的利用，不是吗?{ margin: 0; padding: 0;}.pers...
css如何设置竖排文字
css设置竖排文字的方法：1、通过“word-wrap: break-word;”等属性实现单个竖排文字；2、通过“writing-mode: tb-lr”等属性实现多行竖排文字；3、通过“rotate(90deg);”实现整体竖向排版。本文操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑 CSS几种简单方法实现文字竖向排版 下面介绍几种使用...
利用CSS如何实现文字的竖排
}而通常普通的排版思路：对文字对象宽度设置只能排下一个文字的宽度距离，让文字一行排不下两个文字使其文字自动换行，就形成了竖立排版需求。CSS Code复制内容到剪贴板<!DOCTYPE html>竖列排版实例 在线演示 www.divcss8.combody{text-align:center}.shuli{ margin:0 auto;width:20px;line-height:2...
CSS中的text-indent属性:让文本首行缩进更优雅
将text-indent与线高、字号等属性结合，可调整文本行高和字号，使首行缩进与页面元素和谐相融，创造丰富排版效果。高级技巧包括使用负值实现文本悬挂缩进，通过伪元素与text-indent配合创建独特装饰效果。text-indent属性是实现文本首行缩进的强大工具，能显著提升网页排版质量和阅读体验，对网页设计者极具价值。...
如何用div+CSS 英文和中文分开左右排版 即两栏排版,详看如图第四小点...
DOCTYPE>html,body {width:100%; height:100%; margin:0}#main {width:900px; height:400px; margin:20px auto; padding:20px; border:1px solid #aaa; background-color:#ddd}#main div {width:440px; height:400px; border:1px solid #aaa; background-color:#eee}#main div.left {fl...
怎样用css实现一段文字的竖直排版啊?
一部分是水平方向的阅读顺序，另一部分是垂直方向的阅读顺序。writing-mode和text-align是网页文字排版的两个中重要的属性。writing-mode如上是设置文字的书写方向。text-align是设置文字的对齐方向，其主要参数有left：左对齐，right：右对齐，center：居中，justify：两端对齐。
css设置文本和内容两端对齐
在项目中，UI设计师常需应用简洁、高级的排版样式，比如让表单字段内容在宽度不固定时保持两端对齐，如姓名、手机号、出生地等。为实现这一效果，CSS提供了text-align属性，尤其是justify，可自动调整多行文本两端对齐。然而，使用justify应注意以下两点：它不适用于单行文本或强制换行文本，且最后一行无法...
怎么做网页对话框
1. 确定对话框的位置和大小：可以在页面中使用 CSS 的定位和尺寸属性来设置对话框的位置和大小。2. 创建对话框标题：通过 HTML 元素添加对话框标题，例如使用 h3 元素，可以使用 CSS 来设置标题的样式。3. 填充对话框内容：在对话框中填充所需的内容，例如表单、按钮、文本、链接和图像等。4. 添加...
CSS换行详细教程
例如，通过设置li元素为inline和float:left，以及a元素的white-space:nowrap，可以防止歌手名的单独换行，使得整个链接块保持在一行内。然而，这可能会牺牲一些灵活性，需要根据具体需求权衡。CSS提供了多种实现方式，选择哪种取决于设计目标和性能需求。对于CSS布局，不仅限于单个页面，还涉及到整个网站的系统...
目前CSS实现竖排文本较为通用的方式是什么?
1.关于CSS对直排的支持，桑林志中有过探讨，不过其中的资料链接大多已不能打开。简言之：一是使用writing-mode: tb-lr; 和 layout-flow: vertical-ideographic; 二是使用column-width和column-gap属性。虽然早在2001年，添加writing-mode支持的草案被提出，但最后并没有成为标准。当年只有微软的Internet...
