css - 在弹出的 Lightbox 上获取压缩图像,删除 Fluid Layout.css 修复它。但是我两者都需要,我该如何解决冲突?

标签 css conflict fluid-layout lightbox2

在弹出的 Lightbox 上获取压缩图像,删除 FluidLayout.css 修复它。但是我两者都需要,我该如何解决冲突?

例子如下

在弹出的 Lightbox 上获取压缩图像,删除 FluidLayout.css 修复它。 使用 Dreamweaver CS6 但这是我学习如何创建网站的第 3 天,我需要第 2 天, 我将如何解决这个冲突? 我注意到它只发生在宽大的图像上 这是下面的代码和 CSS 样式表,与下面的网站没有变化 非常感谢,花了3个小时没有成功...... 我也是这方面的新手,如果可以的话,请用蹩脚的话告诉我,我能解决什么问题谢谢! 哦我在用 http://lokeshdhakar.com/projects/lightbox2/ -凯氏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Kj</title>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/lightbox-2.6.min.js"></script>

</head>
<body>

<link href="css/FluidLayout.css" rel="stylesheet" type="text/css">
<link href="css/lightbox.css" rel="stylesheet" />

<a href="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg" data-lightbox="SetDModReel" title="My caption">image #3</a>



</body>
</html>









//css style

/* line 7, ../sass/lightbox.sass */
body:after {
  content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
  display: none;
}

/* line 11, ../sass/lightbox.sass */
.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

/* line 20, ../sass/lightbox.sass */
.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}
/* line 28, ../sass/lightbox.sass */
.lightbox .lb-image {
  display: block;
  height: auto;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
/* line 32, ../sass/lightbox.sass */
.lightbox a img {
  border: none;
}

/* line 35, ../sass/lightbox.sass */
.lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 44, ../sass/lightbox.sass */
.lb-container {
  padding: 4px;
}

/* line 47, ../sass/lightbox.sass */
.lb-loader {
  position: absolute;
  top: 43%;
  left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

/* line 56, ../sass/lightbox.sass */
.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../img/loading.gif) no-repeat;
}

/* line 63, ../sass/lightbox.sass */
.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

/* line 71, ../sass/lightbox.sass */
.lb-container > .nav {
  left: 0;
}

/* line 74, ../sass/lightbox.sass */
.lb-nav a {
  outline: none;
}

/* line 77, ../sass/lightbox.sass */
.lb-prev, .lb-next {
  width: 49%;
  height: 100%;
  cursor: pointer;
  /* Trick IE into showing hover */
  display: block;
}

/* line 84, ../sass/lightbox.sass */
.lb-prev {
  left: 0;
  float: left;
}
/* line 87, ../sass/lightbox.sass */
.lb-prev:hover {
  background: url(../img/prev.png) left 48% no-repeat;
}

/* line 90, ../sass/lightbox.sass */
.lb-next {
  right: 0;
  float: right;
}
/* line 93, ../sass/lightbox.sass */
.lb-next:hover {
  background: url(../img/next.png) right 48% no-repeat;
}

/* line 96, ../sass/lightbox.sass */
.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 103, ../sass/lightbox.sass */
.lb-data {
  padding: 0 4px;
  color: #bbbbbb;
}
/* line 106, ../sass/lightbox.sass */
.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}
/* line 111, ../sass/lightbox.sass */
.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}
/* line 115, ../sass/lightbox.sass */
.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}
/* line 121, ../sass/lightbox.sass */
.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../img/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
/* line 130, ../sass/lightbox.sass */
.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

最佳答案

我自己遇到了确切的问题并在这里找到了解决方案:https://github.com/lokesh/lightbox2/commit/c5b545bfbd8d362968139a3a9eb19a6809f53265

/莉娜

关于css - 在弹出的 Lightbox 上获取压缩图像,删除 Fluid Layout.css 修复它。但是我两者都需要,我该如何解决冲突?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17708332/

相关文章:

html - 带有页眉、页脚和正文的简单 div

css - 3 列/div - 两种流体,中间固定且居中

javascript - 在div中自动从右向左滚动文本

conflict - 达尔克冲突

php - Traits - 与父类的属性冲突

mysql - 如何在 Hibernate 中使用 Mysql 变量?

css - 计算流式/响应式布局中的边距和填充高度

html - 如何在具有填充的 div 中拥有全 Angular 图像?

javascript - 更改 Vimeo 播放器背景颜色

javascript - 响应式 CSS 检查