Hướng dẫn why are my images overlapping css? - tại sao hình ảnh của tôi chồng chéo css?

Nếu bạn có thể phần "Equipe" trên trang web của tôi http://goo.gl/ok43h, bạn sẽ thấy rằng hình ảnh hình đại diện chồng chéo theo chiều dọc và tôi muốn có ít nhất 10px btw mỗi cái. Vấn đề là gì và làm thế nào tôi có thể khắc phục điều này? Cảm ơn nhiều!

Đã hỏi ngày 20 tháng 7 năm 2012 lúc 19:12Jul 20, 2012 at 19:12

1

Try:

.equipe-bio {
padding: 0 0 0 110px;
position: relative;
width: 50%;
margin-left: 10%;
margin-bottom: 24px;
}

Bạn có thể thay thế margin-bottom: 24px; bằng bất kỳ số lượng pixel nào bạn muốn, nhưng điều này sẽ tạo không gian ở giữa các hình ảnh.

Chúc may mắn!

Đã trả lời ngày 20 tháng 7 năm 2012 lúc 19:14Jul 20, 2012 at 19:14

Daniel Lidaniel LiDaniel Li

14.6K6 Huy hiệu vàng42 Huy hiệu bạc59 Huy hiệu Đồng6 gold badges42 silver badges59 bronze badges

0

Bạn cần phải làm một vài điều:

. TIP TUYỆT VỜI: 25px; }

Xả vào vị trí: Tuyệt đối; trên mỗi hình ảnh, và thay vào đó cho nó nổi: trái; Các đoạn văn là một phần của mỗi hình ảnh, nhóm chúng thành một sự nổi lên cũng là một chiếc phao: trái; (và rất có thể là một số lề trái cũng vậy).

Điều đó sẽ sửa nó cho bạn!

Đã trả lời ngày 20 tháng 7 năm 2012 lúc 19:16Jul 20, 2012 at 19:16

1

Thêm thuộc tính min-height vào phần tử chính equipe-bio. Tôi đã thử min-height: 100px; và kết quả là tốt. Bất kể nội dung nào trong các thẻ p, hoặc ngắn sinh học, hộp sẽ không bao giờ thu nhỏ dưới 100 pixel.

Đã trả lời ngày 20 tháng 7 năm 2012 lúc 19:28Jul 20, 2012 at 19:28

BliequabliequeBlieque

6487 Huy hiệu bạc27 Huy hiệu đồng7 silver badges27 bronze badges

0

Kỹ thuật chồng chéo trong một tác phẩm là làm thế nào tất cả các yếu tố trong bản vẽ, vẽ hoặc chụp ảnh chồng chéo lẫn nhau để giúp tạo ra ảo ảnh về chiều thứ ba.› Forums › CSS › [Solved] Fix overlapping of images

• Trang chủ ›Diễn đàn›

Xem 4 bài viết - 1 đến 4 (tổng cộng 4)

• Bài viết

• Xem 4 bài viết - 1 đến 4 (tổng cộng 4) #30068

  Diễn đàn ‘CSS, được đóng lại cho các chủ đề và trả lời mới.

  Chào mừng đến với cộng đồng Treehouse

  http://turbodieselpower.com/afe-stage-2-pg7-intake-03-07-dodge-cummins-5-9l-75-10412.html

  Cộng đồng Treehouse là nơi gặp gỡ cho các nhà phát triển, nhà thiết kế và lập trình viên của tất cả các nền tảng và cấp độ kỹ năng để nhận được hỗ trợ. Phối hợp ở đây về các lỗi mã hoặc lỗi mà bạn cần phản hồi hoặc yêu cầu thêm một bộ mắt về dự án mới nhất của bạn. Tham gia cùng hàng ngàn sinh viên Treehouse và cựu sinh viên trong cộng đồng ngày hôm nay. .

  Tìm kiếm để học một cái gì đó mới? #81153

  Treehouse cung cấp một bản dùng thử miễn phí bảy ngày cho sinh viên mới. Nhận quyền truy cập vào hàng ngàn giờ nội dung và một cộng đồng hỗ trợ. Bắt đầu thử nghiệm miễn phí ngay hôm nay.

  . Nếu bạn lấy nó ra, các khối không còn trùng lặp. Sau đó, bạn có thể nên thêm khối hiển thị vào hình ảnh để văn bản của bạn giành được thử và đặt thêm không gian bên trái.

  Bạn có thể muốn xem xét việc đặt ra các khối này bằng cấu trúc div thay vì các bảng. Nó sẽ tiết kiệm rất nhiều đau đầu và sẽ có ngữ nghĩa hơn. Hi vọng điêu nay co ich!

  Ngày 27 tháng 8 năm 2010 lúc 4:02 PM #81121 #81121

  Cảm ơn ngài. Đó là chiều rộng bàn! Tôi nên phát hiện ra điều đó, nhưng PHP & bảng thông qua tôi. Php & bàn đủ xấu xí của chính họ, đôi khi chỉ là quá nhiều để nhìn vào.

  Ngày 27 tháng 8 năm 2010 lúc 7:09 tối #81104 #81104

  Mừng vì tôi có thể giúp! Chúc mừng.

• Tác giả

  Bài viết

Xem 4 bài viết - 1 đến 4 (tổng cộng 4)

• Diễn đàn ‘CSS, được đóng lại cho các chủ đề và trả lời mới.

Kỹ thuật chồng chéo trong một tác phẩm là làm thế nào tất cả các yếu tố trong bản vẽ, vẽ hoặc chụp ảnh chồng chéo lẫn nhau để giúp tạo ra ảo ảnh về chiều thứ ba.

Chào mừng đến với cộng đồng Treehouse

Tìm kiếm để học một cái gì đó mới?

Treehouse cung cấp một bản dùng thử miễn phí bảy ngày cho sinh viên mới. Nhận quyền truy cập vào hàng ngàn giờ nội dung và một cộng đồng hỗ trợ. Bắt đầu thử nghiệm miễn phí ngay hôm nay.

Đăng bởi Stanley AbrahamStanley Abraham

#gallery{
  margin:0;
  padding:0;
  list-style:none;
}

#gallery li{ 
  float: left;
  width: 45%;
  margin: 2.5%; 
  background-color: #f5f5f5;
  color: #bdc3c7;
}

EDIT: Bạn đã sử dụng sai Thingy `` Nó không phải là '' 'trên iMac của nó ở phía dưới bên trái giữa Shift và Z. N PC ở đâu đó lên trên cùng bên trái. Hi vọng điêu nay co ich. -Arelian

5 câu trả lời

Tôi nghĩ rằng tôi có thể đã tìm thấy sai lầm của bạn:

Bạn đã viết "hình ảnh" thay vào đó bạn phải viết "IMG"

Hình ảnh {Max-Width: 100%; } => Điều này là sai.

img {Max-Width: 100%; } => Điều này là chính xác.

Không thể cho bạn biết những gì bạn đã làm sai trừ khi bạn cung cấp toàn bộ mã HTML và CSS.

Stanley Abraham ngày 27 tháng 11 năm 2014 1:40 sáng November 27, 2014 1:40am

Stanley Abraham | Nhà thiết kế | Danh mục đầu tư của nhà thiết kế Stanley Abraham về thử nghiệm liên lạc với màu sắc và kết cấu. Chơi với các chế độ pha trộn trong Photoshop. Cố gắng tạo ra một ánh sáng phong cách của thập niên 80. Nhỏ giọt được tạo bằng cách sử dụng Brush Photoshop. Tạo hình dạng bằng cách sử dụng liên kết phương tiện xã hội lặp lại © 2014 Stanley Abraham

Stanley Abraham ngày 27 tháng 11 năm 2014 1:40 sáng November 27, 2014 1:40am

Stanley Abraham | Nhà thiết kế | Danh mục đầu tư của nhà thiết kế Stanley Abraham về thử nghiệm liên lạc với màu sắc và kết cấu. Chơi với các chế độ pha trộn trong Photoshop. Cố gắng tạo ra một ánh sáng phong cách của thập niên 80. Nhỏ giọt được tạo bằng cách sử dụng Brush Photoshop. Tạo hình dạng bằng cách sử dụng liên kết phương tiện xã hội lặp lại © 2014 Stanley Abraham

body {
font-family:  'PT Sans', sans-serif;
}
#wrapper {
   max-width: 940px ;
   margin:0 auto ;
   padding:0 5% ; 
}

a {
text-decoration:none;
}

image{
max-width: 100%;
}

/******************************
Heading
******************************/
#logo {
  text-align: center;
  margin: 0;
}

h2 {
font-family: 'PT Sans', sans-serif;
  margin: 15px 0;
  font-size: 2em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
font-size: 1em;
margin: -5px 0 0;
font-weight: normal;
}

/******************************
Navaigation
******************************/
nav {
  text-align:center;
  padding:10px 0;
  margin:20px 0 0;
}

/******************************
Footer
******************************/  

footer{
  text-align: center;
  padding-top: 10px 0;
  font-size: 46;
  color:#ccc;
}

/******************************
Page: Portfilo 
******************************/
#gallery{
  margin:0;
  padding:0;
  list-style:none;
}

#gallery li{ 
  float: left;
  width: 45%;
  margin: 2.5%; 
  background-color: #f5f5f5;
  color: #bdc3c7;
}
/******************************
Colors 
******************************/

/* Site Body*/
body {
  background-color:#fff;
  color:#999;

/* Green Header */
}
header{
  background: #6ab47b;
  border-color:#599a68;
}

/* Nav Background on Mobile */
nav {
  background:#599a68;
}

/* Logo text */
h2, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}



/* Nav Link */
nav a, nav a:visited {
color:#fff;
}

/*Selected Nav Link*/
nav a.selected, nav a:hover {
  color:#32673f;
}

/****************************** Chung ****************** ************/ November 27, 2014 2:03am

Stanley Abraham ngày 27 tháng 11 năm 2014 2:03 sáng

Wow, cảm ơn bạn rất nhiều! Tại sao tôi không bắt được điều đó? Tôi đã dành 2 giờ để cố gắng tìm ra sai lầm của mình. cười lớn

Hình ảnh chồng chéo là gì?