我有一个包含许多小表的大表。我需要在这些小表中添加一些内容，但是当我这样做时，public class SelectDateFragment extends DialogFragment implements DatePickerDialog.OnDateSetListener {
@RequiresApi(api = Build.VERSION_CODES.N)
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
final Calendar calendar = Calendar.getInstance();
int yy = calendar.get(Calendar.YEAR);
int mm = calendar.get(Calendar.MONTH);
int dd = calendar.get(Calendar.DAY_OF_MONTH);
return new DatePickerDialog(getActivity(), this, yy, mm, dd);
}
public void onDateSet(DatePicker view, int yy, int mm, int dd) {
populateSetDate(yy, mm+1, dd);
}
public void populateSetDate(int year, int month, int day) {
/** set text*/
}
的一些内容会改变其大小，使其他内容变得太窄。这是小提琴：
https://jsfiddle.net/vaxobasilidze/jwvzpt62/14/
内容我需要放入表格，是一个div td's，它有一个红色边框。如您所见，当我以像素为单位设置.placeHolder的宽度时会出现问题。如果宽度为100％，则可以正常工作。我该如何解决？设置.placeHolder没有帮助。在第一个表格宽度是100％，一切都很好，但在第二个表格宽度设置为像素。尽管像素中有足够的位置，min-width仍会使其父.placeHolder更宽并且会扰乱音频块。
tdfor(var i=1; i<=3; i++){
var blockId = "channel"+i;
var aspect = "16:9";
var aspX = parseInt(aspect.split(':')[0]);
var aspY = parseInt(aspect.split(':')[1]);
var width = $('#'+blockId).closest('.channels').find('.vid').width();
var height = $('#'+blockId).closest('.channels').find('.vid').height();
var test = (width/aspX)*aspY;
var test2 = (height/aspY)*aspX;
if(test <= height){
$('#'+blockId).closest('.channels').find('.placeHolder').css({'height': test+'px'});
}
else {
$('#'+blockId).closest('.channels').find('.placeHolder').css({'width': test2+'px'});
}
}html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #2c2c2c;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJjMmMyYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iIzNkM2QzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzEzMTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #2c2c2c), color-stop(37%, #3d3d3d), color-stop(66%, #353535), color-stop(66%, #353535), color-stop(100%, #131313));
background: -webkit-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
background: -o-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
background: -ms-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
background: linear-gradient(to right, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#131313', GradientType=1);
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
color: #b8c0c8;
background: rgba(0, 0, 0, 0.3);
}
#leftDiv {
display: inline-block;
width: 15%;
height: 100%;
border-right: 3px solid rgba(0,0,0,0.2);
box-sizing: border-box;
float: left;
margin: 0;
padding: 0;
overflow: auto;
text-shadow: 1px 1px 1px rgba(0,0,0,0.33);
}
#displayItems {
min-height: auto;
border-bottom: 3px solid rgba(0,0,0,0.2);
padding: 3px;
/*resize: vertical;*/
overflow: auto;
}
#menu {
padding: 0;
margin: 0;
margin-bottom: 5px;
list-style-type: none;
}
#menu li {
background: url(images/comment-bg3.png) repeat;
list-style: none;
padding: 2px;
border-radius: 4px;
margin-top: 1px;
}
#menu li span {
display: block;
width: 100%;
min-height: 20px;
line-height: 20px;
text-align: center;
background: url(images/comment-bg2.png) repeat;
box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
cursor: pointer;
}
#menu li ul {
padding: 0;
list-style-type: none;
overflow: hidden;
}
#menu li ul li {
background: url(images/comment-bg3.png) repeat;
width: 100%;
max-width: 250px;
text-align: center;
min-height: 20px;
line-height: 20px;
margin: auto;
border-bottom: 1px solid rgba(0,0,0,0.3);
cursor: move;
}
#menu li ul li:first-child {
margin-top: 2px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
#menu li ul li:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: none;
}
#settingsDiv {
margin: 0;
width: 100%;
min-height: 10px;
box-sizing: border-box;
margin: 0;
padding: 3px;
overflow: auto;
}
#mainDiv {
display: inline-block;
width: 85%;
min-height: 100%;
max-height: 100%;
box-sizing: border-box;
position: relative;
float: left;
margin: 0;
overflow: auto;
padding: 3px;
}
.channel {
min-width: 250px;
width: auto;
text-align: center;
min-height: 30px;
border: 1px solid #515151;
border-radius: 6px;
position: absolute;
padding: 0;
background: url(images/comment-bg3.png) repeat;
overflow: hidden;
text-shadow: 1px 1px 1px rgba(0,0,0,0.33);
box-shadow: 5px 5px rgba(0,0,0, 0.1);
border-spacing: 0px;
}
.thClass {
min-width: 150px;
width: 102%;
margin-left: -3px;
text-align: center;
background: url(images/comment-bg2.png) repeat;
box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
margin-top: -2px;
min-height: 30px;
max-height: 30px;
line-height: 30px;
font-size: 19px;
cursor: move;
}
.header{
margin-left: 17px;
}
.tableBody {
display: block;
min-height: 25px;
text-align: center;
width: 102%;
margin-left: -2px;
cursor: default;
}
.channel tbody tr td {
display: block;
line-height: 25px;
text-align: center;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
#settingsDiv {
width: 100%;
overflow: auto;
box-sizing: border-box;
}
.settings {
float: right;
margin-top: 3px;
margin-right: 8px;
cursor: pointer;
}
.add {
display: block;
width: 102%;
margin-left: -3px;
background: url(images/comment-rowsubmit.png) repeat-x;
min-height: 20px;
}
.addList{
width: 100px;
cursor: pointer;
}
.addList:hover{
text-decoration: underline;
color: antiquewhite;
}
.draggableItems {
max-height: 150px;
overflow-y: auto !important;
}
.draggableItems::-webkit-scrollbar {
width: 10px;
border-radius: 5px;
background: url(images/comment-bg.png) repeat;
border: 1px solid #ccc;
}
.draggableItems::-webkit-scrollbar-thumb {
border-radius: 5px;
background: url(images/comment-bg3.png) repeat;
border: 1px solid #aaa;
}
.draggableItems::-webkit-scrollbar-thumb:hover {
background: url(images/bg-tabs.png) repeat;
}
.draggableItems::-webkit-scrollbar-thumb:active {
background: linear-gradient(left, #22ADD4, #1E98BA);
}
#displaySizes {
list-style: none;
padding: 0;
margin-top: 0;
max-width: 100px;
}
.disp tbody tr th {
column-span: all;
}
.disp tbody tr td {
display: table-cell;
}
.ui-resizable {
position: absolute !important;
width: 250px;
}
#mainDiv .container {
width: 300px;
height: 200px;
}
#mainContainer {
width: 1926px;
height: 1086px;
}
#dispInfo {
margin: 0;
padding: 0;
width: 100%;
text-align: center;
background: url(images/comment-bg2.png);
}
.videoDropped {
width: 300px;
height: 300px;
}
.screens{
border-collapse: collapse;
border-spacing: 0;
width: 100%;
height: 100%;
}
.channels {
border-spacing: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-weight: bold;
border: 1px solid rgba(30, 30, 30, 1);
border-radius: 4px;
overflow: hidden;
background: url(images/comment-bg3.png) repeat;
}
.channels td {
border-left: 1px solid rgba(30, 30, 30, 1);
}
.channels td:first-child {
border-left: none;
}
.channelHeader {
height: 7%;
text-align: center;
background: url(images/comment-bg2.png) repeat;
box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
}
.audioVideo {
height: 79%;
}
.channelInfo {
height: 7%;
max-height: 7%;
text-align: center;
background: url(images/comment-bg2.png) repeat;
border-bottom: 1px solid rgba(30, 30, 30, 1);
border-top: 1px solid rgba(30, 30, 30, 1);
box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
}
.channelInfo td {
border-radius: 2px 2px 0 0;
}
.channelInfoValues {
height: 7%;
max-height: 7%;
text-align: center;
}
.btn {
width: 100%;
background: url(images/rsz_buttons.png);
background-size: cover;
border: 1px solid rgba(0,0,0,0.7);
height: 22px;
color: #b8c0c8;
cursor: pointer;
border-radius: 4px;
outline: none;
box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
}
.btn:hover {
background: url(images/hover_buttons.png) no-repeat;
background-size: cover;
border: none;
color: white;
border: 1px solid rgba(0,0,0,0.7);
}
.cpu {
width: 120px;
height: 70px;
min-width: 120px;
min-height: 70px;
border: none;
background: none;
box-shadow: none;
resize: none;
padding: 7px;
}
.cpu:hover {
resize: both;
}
/*Audio styling*/
.sound {
padding: 0;
margin: 0;
}
.audiodb {
width: 100%;
height: 100%;
position: relative;
}
.levels {
position: absolute;
width: 40%;
margin-left: 17%;
top: 5%;
height: 1px;
left: 30%;
background: silver;
z-index: 300;
}
.level1 {
top: 13%;
}
.level2 {
top: 20%;
}
.level3 {
top: 30%;
}
.level4 {
top: 45%;
}
.level5 {
top: 61%;
}
.level6 {
top: 78%;
}
.level7 {
top: 95%;
}
.audioBackground {
width: 15%;
height: 90%;
left: 53%;
position: absolute;
top: 5%;
background: #ff0000;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjclIiBzdG9wLWNvbG9yPSIjZmYwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZmFmZjAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMzglIiBzdG9wLWNvbG9yPSIjMDBmZjJhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNmQxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, #ff0000 0%, #ff0000 7%, #faff00 20%, #00ff2a 38%, #006d10 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(7%,#ff0000), color-stop(20%,#faff00), color-stop(38%,#00ff2a), color-stop(100%,#006d10)); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(top, #ff0000 0%,#ff0000 7%,#faff00 20%,#00ff2a 38%,#006d10 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(top, #ff0000 0%,#ff0000 7%,#faff00 20%,#00ff2a 38%,#006d10 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(top, #ff0000 0%,#ff0000 7%,#faff00 20%,#00ff2a 38%,#006d10 100%); /* IE10 preview */
background: linear-gradient(to bottom, #ff0000 0%,#ff0000 7%,#faff00 20%,#00ff2a 38%,#006d10 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#006d10',GradientType=0 );
overflow: hidden;
}
.audioRight {
left: 71%;
}
.audioCover {
width: 200%;
height: 30%;
background: grey;
margin-left: -5px;
}
.audioNumbers {
width: 30%;
height: 100%;
text-align: center;
position: absolute;
}
.db {
width: 100%;
text-align: center;
position: absolute;
left: 15%;
}
.db p {
margin-top: -5px;
}
.max {
top: 5%;
}
.high {
top: 15%;
}
.normal {
top: 35%;
}
.low {
top: 95%;
}
#mainContainer {
transition: all 100ms ease-in-out;
transform-origin: 0 0 0;
transform: translate(0,0) scale(1);
}
.placeHolder {
width: 100%;
height: 100%;
margin: auto;
border: 1px solid red;
}
答案 0 :(得分：1)
在您的代码中，您将px与％混合。不要那样做！它混淆了浏览器中的布局计算。我建议只使用％来指定列宽，并确保所有cols总共有100％。