sách gpt4 ai đã đi

Hai div trong cùng một hàng (bên trong div cha hình mũi tên), văn bản trong một div được cắt bớt dựa trên chiều rộng của div thứ hai

In lại 作者:行者123 更新时间:2023-11-28 18:08:24 28 4
mua khóa gpt4 Nike

这是一个 jsfiddle link of my issue

HTML



8.123456

huh-fjiuetie




条件是:

  1. h2 标签内的两个 phân chia 必须在同一行。
  2. 类为`.number 的div。必须是灵活的,它的内容是可变的。
  3. .chữ div 中的内容根据数字 div 中的内容进行裁剪(宽度不能固定,因为数字 div 中的内容是动态生成的)
  4. 背景颜色也不固定(因此我们无法将背景颜色固定到数字 div 以按要求进行)

如有任何建议,我们将不胜感激。

1 Câu trả lời

根据较早的相关问题,您可以尝试以下操作。

按如下方式修改您的 HTML:




huh-fjiuetie


8.123456




并应用以下 CSS:

body {margin: 0;} /* Note: learn about reset style sheets... */

/* The following takes care of the shadow/coloring/arrow styling */
.Right {
vị trí: tương đối;
width: 80%;
margin-right: 50px;
margin-top: 4%;
}
.Right-after {
content:"";
vị trí: tuyệt đối;
top: 0;
width: 0;
border-style: solid;
border-width: 3.3em 0 3.3em 3.3em;
right:-3.2em;
}
.colorV {
color:#dbdcde;
}
.green {
background: linear-gradient(to left, #1d9755, #005b26, #002000);
}
.green-after {
border-color: transparent transparent transparent #1d9755;
}

/* The following takes care of the test clipping */
.table-wrap {
display: table;
width: 100%;
height: 200px; /* this may be optional... */
font-size: 1.00em;
line-height: 1.50em;
font-size: 5.0em;
}
.number-cell {
display: table-cell;
}
.text-cell {
display: table-cell;
}
.inner {
height: 1.50em;
overflow: hidden;
word-break: break-all;
}

查看演示:http://jsfiddle.net/audetwebdesign/uKryj/

CSS 有两部分。

.Right.green 相关的规则处理绿色阴影和箭头图案。这建立了一个明确定义的 block 级容器。

div.Right block 包含一个子 block .table-wrap,它将包含文本和数字,并将采用前面所示的剪裁:

Two divs in the same row with text in one div getting clipped based on the width of second div

添加子 block ,.Right-after 生成箭头图案。

关于javascript - 同一行中的两个 div(在箭头形的父 div 中),其中一个 div 中的文本根据第二个 div 的宽度被剪裁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19178374/

28 4 0
Bài viết được đề xuất: javascript - uibModal 嵌套不起作用
Bài viết được đề xuất: javascript - 添加具有唯一 id 的动态输入字段以进行计数
Bài viết được đề xuất: javascript - 单击按钮更改文本
Bài viết được đề xuất: javascript - 在露天 freemarkuer 模板中列出 javascript 数组
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com