我的div在宽度方面被掩盖了。在里面，我有2个相同宽度的div浮动，所以100％+ 100％。这意味着左侧是可见的，或者右侧在任何时候都可见。
事实上，我想要实现的几乎完全相同：
虽然有一点不同。我父母的身高不固定，取决于孩子的大小。因此，当我将function createGrid() {
var he = $('#gridView').height(),
wi = $('#gridView').width();
var x= 1;
for (i=0; i< 12; i++) {
for (var j=0; j < 12; j++) {
var $newdiv = $('<div/>', {
"class": "grid",
text: '',
id: i + '##' + j,
x: i,
y: j
});
$('#gridView').append($newdiv);
// x++;
}
}
}
function handleDragStop( event, ui ) {
var offsetXPos = parseInt( ui.offset.left );
var offsetYPos = parseInt( ui.offset.top );
console.log( "Drag stopped!\n\nOffset: (" + offsetXPos + ", " + offsetYPos + ")\n");
}
$( document ).ready(function() {
createGrid();
var original = true;
var drop = false;
applyDraggableOnList();
applyDroppableOnGrid();
applyDraggableOnCable();
jsPlumb.ready(function() {
console.log("jsPlumb is ready");
});
});
var original = true;
var droppable = false;
function applyDraggableOnList(){
$("#container > li > img").draggable({
cursor: 'move',
helper: "clone",
containment: '#gridView',
revert: "invalid",
stop: function( event, ui ) {
original = false;
},
start: function( event, ui ) {
original = true;
applyDraggableOnGrid();
}
});
}
function applyDraggableOnCable(){
$("#cableContainer > li > img").draggable({
cursor: 'move',
helper: "clone",
containment: '#gridView',
revert: "invalid",
stop: function( event, ui ) {
original = false;
},
start: function( event, ui ) {
original = true;
}
});
}
function applyDroppableOnList(){
}
function applyDraggableOnGrid(){
$("#gridView").find('.draggableSpecific').draggable({
cursor: 'move',
helper: "original",
containment: '#gridView',
revert: "true",
stop: function( event, ui ) {
original = false;
},
start: function( event, ui ) {
original = true;
}
});
}
var anEndpointDestination = {
endpoint: "Dot",
isSource: true,
isTarget: true,
maxConnections: 3,
connector:[ "Bezier", { curviness:1 }],
anchor:"AutoDefault"
};
var counter = 1;
function applyDroppableOnGrid(){
$("#gridView > div").droppable({
activeClass: 'test',
tolerance: 'fit',
accept: function (elm) {
var childLength = $(this).children().length;
if(childLength == 0)
return true;
else
return false;
},
drop: function( event, ui) {
console.log("(ui.draggable): " + ($(ui.draggable).hasClass("draggableSpecific")));
if(!$(ui.draggable).hasClass("draggableSpecific") && $(ui.draggable).attr("data-server") != "Cable") {
var draggableId = ui.draggable.attr("src");
var droppableId = $(this).attr("id");
var currentObject = ui.draggable.clone();
$(this).append(currentObject);
$(this).find("img").addClass("draggableSpecific").addClass("window").removeClass("ui-draggable").attr('id', "jsPlumb_"+counter);
counter++;
} else if($(ui.draggable).attr("data-server") == "Cable") {
console.log("Cable ");
jsPlumb.connect({ uuids:[$(this).find("img").attr("id").getUuid(), $(this).find("img").attr("id").getUudi()] });
}
jsPlumb.addEndpoint($(this).find("img").attr("id") ,{uuid:$(this).find("img").attr("id")});
var anchorNode = $(this).find("img");
/*jsPlumb.addEndpoint(
anchorNode,
anEndpointDestination
);*/
$(".draggableSpecific").draggable({
cursor: 'move',
containment: '#gridView',
revert: "invalid"
});
jsPlumb.draggable($(this).find("img"));
}
});
}
function deleteImage( $item ) {
console.log("Called deleteImage");
}
应用于父级时，它都会变成梨状。
对此有何解决方案？如果需要，我可以使用flexbox，因为我不支持IE8 / 9。
CSS会是这样的
position: absolute;HTML
.outer-wrap {
overflow:hidden;
position:relative;
width:300px;
}
.middle-wrap {
overflow:hidden;
position:absolute; // this doesn't work because it has no fixed height
left:0;
width:600px;
}
.middle-wrap.open {
right:0;
}
.inner-wrap {
float:left;
width:300px;
}
答案 0 :(得分：1)
另一个编辑：我创建了一个codepen，它在这里：http://codepen.io/anon/pen/oxwmex点击最右边的两个按钮，它们在状态之间切换
如您所述，您的解决方案无法正常工作，因为.middle-wrap没有固定的高度。尝试使用以下设置（注意：没有浮动，没有绝对位置）：
.outer-wrap {
overflow-x: hidden;
position: relative;
border: 1px solid red;
width: 300px;
margin: 0 auto;
}
.middle-wrap {
position: relative;
width: 600px;
left: 0px;
}
.inner-wrap {
display: inline-block;
width: 300px;
vertical-align: top;
}
这将在.inner-wrap的可见部分内显示两个.outer-wrap的左侧。要使.inner-wrap可见，请使用类似
jQuery(".middle-wrap").css("left", "-300px")
用于在两个内包之间切换的元素或事件。或者，如果你想要它动画：
jQuery(".middle-wrap").aminmate({left: "-300px"})
（另一种切换回left: 0px的方法）
所有元素的高度自动调整为两个.inner-wrap元素中较高元素的高度。
P.S。 （编辑）：从HTML中的内包装中删除style="height:100px;"设置，只需填写一些内容即可使其正常工作。