25
4
我创建了自己的进度条并遇到了一些问题
我有一个宽度为 90% 的完整 .box
在那个盒子里我有宽度为 100 的 .progress div
在 .progress div 我有 .left-free div 10%, .progressbar 80%, .right-free 100%
在 .progressbar 我有 4 个 div .grey 30%, .violet 30%, .brown 30%, .blank 0%
问题是不知道为什么.grey、.violet、.brown 的大小不一样!
编辑:(.blank div 只是一个间隔符.. 一切都很好。)
我不使用边距或填充或任何边框。.progressbar 周围的边框是用 box-shadow 实现的。
我的 html 代码:
Trung tâm cá nhân
Điều phát hành
từ bỏ
10% free
10% free
我的 CSS 代码:
thân hình
{
chiều rộng: 100%;
màu nền:#eee;
phần đệm: 0;
lề:0 tự động;
}
#box
{
width:90%;
phần đệm: 0;
margin:2% auto;
màu nền:#eee;
}
#progress
{
chiều rộng: 100%;
phần đệm: 0;
margin-bottom:10%;
}
.left-free
{
width:10%;
nổi:trái;
box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 1); /* right */
}
.progressbar
{
vị trí: tương đối;
chiều rộng: 80%;
nổi:trái;
background-color:#ffffff;
box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 1), /* top */
inset 0px -1px 0px rgba(0, 0, 0, 1); /* bottom */
}
.grey {background-color:grey;}
.violet {background-color:violet;}
.brown {background-color:brown;}
.blank {background-color:#ffffff;}
.grey,
.violet,
.brown,
.blank
{
chiều cao: 100px;
nổi:trái;
margin-top:1px;
}
.left-free,
.progressbar,
.right-free
{
height:102px;
}
.right-free
{
width:10%;
nổi:trái;
box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 1); /* border left */
text-align:right;
}
我创建了一个屏幕截图，并在所有 3 个框上放置了一个宽度相同的绿色条!在 .violet 和 .brown div 的右端有一个垫片(希望你能在图片上看到它)
为了更好的视野，这里有一个裁剪
可以在jsfiddle上看到运行代码
第二个例子:jsfiddle 2
知道为什么盒子的尺寸不一样吗？
编辑:我将 html 上传到 pastebin
câu trả lời hay nhất
将灰色和棕色宽度更改为 30.1% 或仅删除边框进度条
关于html - 具有百分比宽度的 DIV 不起作用(无边框，无边距/填充)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13654696/
25
4
0
Sự hiểu biết của tôi là chiều rộng: 100% làm cho một phần tử có cùng chiều rộng với phần tử gốc của nó, trong khi chiều rộng: kế thừa chỉ thực hiện điều này nếu chiều rộng của phần tử gốc được chỉ định rõ ràng. Cách hiểu này có đúng không? Nếu vậy, đối với tôi, có vẻ như khi chiều rộng:
Và đặt "chiều cao" thành 1/2 toàn màn hình. Đây là mã của tôi: div{ nền:red; } Câu trả lời hay nhất Tôi sẽ sử dụng kết hợp css và javascript (sử dụng
Chỉnh sửa 2: Có vẻ như vấn đề nằm ở phần tử "bigTable" của quy tắc. Rõ ràng chiều rộng tối thiểu sai được kế thừa khi sử dụng trên mẫu bố cục. Tôi vẫn đang điều tra việc này. Tuy nhiên, tôi sẽ thử lại div. Một vấn đề lớn là sử dụng điều hướng cố định và nội dung động, nhưng tôi đã làm điều này
Trang web của tôi cần hiển thị các bảng rộng. Phía trên là tiêu đề, phải rộng bằng toàn bộ trang (trong trường hợp này là rộng bằng bảng). Tuy nhiên, nó rộng bằng khung nhìn (kích thước màn hình) nên khi hiển thị trông ổn, nhưng khi người dùng cuộn sang một bên,
Tôi có một vấn đề nhỏ. Tôi luôn sử dụng float để sắp xếp các phần tử của mình. Tôi đang chuyển sang flexbox, tôi đã tạo một số ví dụ và mọi thứ đều ổn, nhưng tôi đang làm việc trên một ví dụ mà mọi thứ không diễn ra tốt đẹp. Tôi có một thùng chứa từ 1 đến 12 sản phẩm, 4 sản phẩm mỗi hàng
Ví dụ: chúng dẫn đến hành vi hoàn toàn khác khi nói đến lề tự động. Hãy xem câu đố này: https://jsfiddle.net/L1rk46xy/ .fixed { display:fixed;
Tôi đã thử đặt độ rộng của đoạn văn trong bài viết thành 75% và độ rộng phản hồi của hình ảnh thành 100%. Tuy nhiên, luôn luôn theo mặc định. Một số văn bản Một số văn bản Một số văn bản Một số văn bản Hiện tại, tôi chỉ
Các phần tử HTML có thể có thuộc tính chiều rộng/chiều cao và chúng cũng có thể có thuộc tính chiều rộng/chiều cao CSS: Sự khác biệt giữa thuộc tính HTML và thuộc tính CSS là gì và chúng có tác dụng giống nhau không? Câu trả lời hay nhất về chủ đề này
Tôi có một chiếc bàn chạy và bây giờ cần một chiếc bàn cố định. Vấn đề là khi bạn sửa td-s, th-s không tôn trọng chiều rộng của td-s của tbody. Kích thước cột đều được BootStrap xử lý. Tôi đã đọc rất nhiều
Tôi muốn bố trí một khu vực như thế này: ---- ---- |A |B | --- ---- Mỗi hộp trong số ba hộp là một .box
Tôi đang gặp rất nhiều vấn đề. 1) Tôi đang sử dụng Bootstrap-Select để có hộp chọn hiện đại có chức năng tìm kiếm, nhưng dù tôi có cố gắng thế nào, dường như tôi không thể có được lựa chọn để điền vào cột. 2) Tôi đã chia dòng thành 2
http://jsfiddle.net/95EtZ/1/ Một nửa vấn đề đã được giải quyết bằng hành động. Hiện tại, nó được đặt với chiều rộng vùng chứa được mã hóa cứng trong javascript. Tôi cần js để lấy chiều rộng của div vùng chứa - sử dụng cuộn cửa sổ
Tôi muốn hai div có chiều rộng và chiều cao 100%. Tôi biết div con sẽ không hoạt động vì div cha không có chiều cao cụ thể, nhưng có cách nào khác không? HTML: CSS: nội dung
Tôi cần thay đổi chiều cao và chiều rộng bằng jQuery. Tôi đã thử đoạn mã sau jQuery('#chart_popup').css('height','600px');
Trong điều khiển WPF tùy chỉnh, tôi muốn đặt chiều rộng của điều khiển làm hàm của chiều cao. Ví dụ: Chiều rộng = Chiều cao/3 * x; Cách tốt nhất để đạt được điều này là gì để điều khiển thay đổi kích thước (và khởi tạo) một cách chính xác và trơn tru? Câu trả lời hay nhất bạn có thể
Tôi đang sử dụng igraph để vẽ đồ thị trong R, thực hiện những việc như cốt truyện (mygraph, vertex.color = "green"). Có cách nào để thay đổi màu sắc và/hoặc chiều rộng của đường viền đỉnh không? Câu trả lời hay nhất Hãy xem mã bên dưới;
Có cách nào để đặt chiều cao và chiều rộng của hình ảnh bằng jquery không? Sau đây là mã của tôi var img = new Image(); // Tạo hình ảnh $(img).load(function(){
Câu hỏi này tương tự như cách tìm-chiều-rộng thực-của-lưới-thành phần-với-scrollbar-in-delphi nhưng tôi không thể lấy được CalcDrawInfo(
Mới sử dụng HTML/CSS tại đây. Khi cố gắng áp dụng những gì tôi học được trên Codeacademy, tôi gặp phải một vấn đề trong đó tiêu đề tôi đặt thành width:100% cuối cùng lại rời khỏi trang. Tôi tin rằng điều này là do biên giới,
Mới sử dụng HTML/CSS tại đây. Khi cố gắng áp dụng những gì tôi học được trên Codeacademy, tôi gặp phải một vấn đề trong đó tiêu đề tôi đặt thành width:100% cuối cùng lại rời khỏi trang. Tôi tin rằng điều này là do biên giới,
Tôi là một lập trình viên xuất sắc, rất giỏi!