我正在尝试创建一个简单的React应用,以显示表中的内容。如下图所示,当要显示的内容很短时,一切都很好。
但是如果内容很大,我想将其移动到下一个单元格中,如下图所示。
我可以通过CSS实现吗?还是您现在有解决此问题的解决方案?我不要任何overflows
。
这是我的示例代码:https://jsfiddle.net/f0b5nk6d/18/ 如您所见,内容重叠在一起。.
答案 0 :(得分:0)
您的代码(jsfiddle)中的问题是您已将类.sale-item
的高度设置为高,并且需要将其溢出,请删除该类,这样会很好,如下面的工作片段所示。
body {
margin: 0;
}
.container {
background-color: #000;
width: auto;
padding: 5px;
}
.sale-item-container {
display: inline-block;
column-width: calc(100vw/4);
height: 99vh;
}
.sale-item {
/* height: calc(99vh/2); */ /* Removed */
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script type="text/javascript" src="https://unpkg.com/react/umd/react.development.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script type="text/javascript" src="https://fiddle.jshell.net/js/babel/babel.js"></script>
<div id="root"></div>
<script type="text/jsx" data-presets="es2017,react,stage-0" data-plugins="transform-decorators-legacy">
const data = [{
id: 0,
header: 25,
items: [{
name: "FANTA 0.2 L",
count: 1,
subItems: [{
name: "+ lód"
}]
}, {
name: "COCA-COLA 0.2 L",
count: 1,
subItems: [{
name: "BEZ LODU"
}]
}]
}, {
id: 0,
header: 26,
items: [{
name: "FANTA 0.2 L",
count: 1,
subItems: []
}, {
name: "COCA-COLA 0.2 L",
count: 1,
subItems: [{
name: "BEZ LODU"
}]
}]
}, {
id: 0,
header: 27,
items: [{
name: "FANTA 0.2 L",
count: 1,
subItems: [{
name: "+ lód"
}]
}, {
name: "COCA-COLA 0.2 L",
count: 1,
subItems: []
}]
}, {
id: 0,
header: 40,
items: [{
name: "SAŁATKA DUŻA",
count: 1
}, {
name: "SAŁATKA DUŻA",
count: 1,
subItems: [{
name: "z kurczakiem"
}, {
name: "sos duży"
}]
}, {
name: "ŚREDNIA: PIZZA",
count: 0.5,
subItems: [{
name: "standard"
}, {
name: "sos bbq"
}, {
name: "cebula"
}, {
name: "ser"
}, {
name: "chilli"
}, {
name: "chipsy"
}, {
name: "oliwki"
}]
}, {
name: "ŚREDNIA: PIZZA",
count: 0.5,
subItems: [{
name: "ciasto"
}, {
name: "sos bbq"
}, {
name: "boczek"
}, {
name: "parmezan"
}, {
name: "ser"
}, {
name: "feta"
}, {
name: "cebula"
}, {
name: "sos śmietanowy"
}]
}]
}, {
id: 0,
header: 38,
items: [{
name: "FANTA 0.2 L",
count: 1,
subItems: [{
name: "+ lód"
}]
}, {
name: "COCA-COLA 0.2 L",
count: 1,
subItems: [{
name: "BEZ LODU"
}]
}]
}];
const Subitem = ({ data }) => {
return React.createElement(
"li",
{ className: "list-group-item", style: { paddingLeft: '25px' } },
React.createElement(
"div",
null,
React.createElement(
"span",
{ style: { paddingLeft: '5px' } },
data.name
)
)
);
};
const Panel = ({ data }) => {
return React.createElement(
"div",
{ className: "sale-item" },
React.createElement(
"div",
{ className: "panel panel-default" },
React.createElement(
"div",
{ className: "panel-heading" },
React.createElement(
"div",
{ className: "panel-title" },
data.header
)
),
React.createElement(
"div",
{ className: "panel-body" },
React.createElement(
"ul",
{ className: "list-group" },
data.items.map((data, key) => React.createElement(
React.Fragment,
{ key: key },
React.createElement(
"li",
{ className: "list-group-item" },
React.createElement(
"b",
null,
data.count,
" ",
data.name
)
),
data.subItems && data.subItems.map((subItem, index) => React.createElement(Subitem, { key: index, data: subItem }))
))
)
)
)
);
};
let App = class App extends React.Component {
render() {
return React.createElement(
"div",
{ className: "container" },
React.createElement(
"div",
{ className: "sale-item-container" },
data.map((value, index) => {
return React.createElement(Panel, { data: value, key: index });
})
)
);
}
};
ReactDOM.render(React.createElement(App, null), document.getElementById('root'));
</script>